React Apollo 显示 "react-apollo only supports a query, subscription, or a mutation per HOC" 错误

Question

我收到以下错误：

ExceptionsManager.js:74 react-apollo only supports a query, subscription, or a mutation per HOC. [object Object] had 2 queries, 0 subscriptions and 0 mutations. You can use 'compose' to join multiple operation types to a component

即使我在我的组件中使用 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
            }
        }
    }
'
  

Answer 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>;
};