React Apollo 显示“react-apollo 仅支持每个 HOC 的查询、订阅或突变”错误答案

【问题标题】：React Apollo showing "react-apollo only supports a query, subscription, or a mutation per HOC" errorReact Apollo 显示“react-apollo 仅支持每个 HOC 的查询、订阅或突变”错误
【发布时间】：2020-02-19 01:12:41
【问题描述】：

我收到以下错误：

ExceptionsManager.js:74 react-apollo 只支持查询，订阅，或每个 HOC 的突变。 [object Object] 有 2 个查询，0 订阅和 0 个突变。您可以使用“撰写”来加入多个组件的操作类型

即使我在组件中使用compose：

import React from "react";
import React from "react";
import { compose, graphql } from "react-apollo";
import { View } from "react-native";
import { GET_ITEM, GET_REVIEWS } from "../graphql/query";

const PostingDetail = ({ navigation }) => {
  console.log("itemQuery", itemQuery);

  return <View></View>;
};

export default compose(
  graphql(GET_ITEM, { name: "itemQuery" }),
  graphql(GET_REVIEWS, { name: "reviewsQuery" })
)(PostingDetail);

GET_REVIEW 的 GraphQL：

export const GET_REVIEWS = gql'
    query Reviews($id: ID!) {
        reviews(
            id: $id
        )
    }{
        author {
            firstName
            lastName
        }
        comment
        createdAt
    } 
'

GET_ITEM 的 GraphQL：

export const GET_ITEM = gql'
    query Post($id: ID!) {
        post(
            id: $id
        ){
            id
            title
            body
            location
            price
            image
            quantity
            author {
                id
                firstName
                lastName
            }
            latitude
            longitude
            booking {
                startDate
                endDate
            }
        }
    }
'

【问题讨论】：

标签： reactjs react-native graphql react-apollo

【解决方案1】：

对于您当前正在尝试的方法并没有真正的修复，但更改为 React Hooks 和 useQuery 会使您的代码更简单。

import React from 'react';
import { View } from 'react-native';
import { compose, graphql } from 'react-apollo';
import { GET_ITEM, GET_REVIEWS } from '../graphql/query';
import { useQuery } from '@apollo/react-hooks';

const PostingDetail = ({ navigation }) => {
  const { data: itemData } = useQuery(GET_ITEM);
  const { data: reviewData } = useQuery(GET_REVIEWS);

  console.log('itemQuery', itemData);
  console.log('reviewQuery', reviewData);

  return <View></View>;
};

【讨论】：