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

Posted 2023-03-08

【中文标题】React Apollo 显示“react-apollo 仅支持每个 HOC 的查询、订阅或突变”错误

【英文标题】：React Apollo showing "react-apollo only supports a query, subscription, or a mutation per HOC" error

【发布时间】：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
            
        
    
'
  

【参考方案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>;
;