React Apollo showing "react-apollo only supports a query, subscription, or a mutation per HOC" error

user_10116367 0
Viewed 691

I'm getting the following error:

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

even though I'm using compose in my component:

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);

GraphQL for GET_REVIEW:

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

GraphQL for GET_ITEM:

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
            }
        }
    }
'
react-apollo graphql react-native reactjs
1 Answers

Not really a fix for the method that you are currently trying but changing to React Hooks and useQuery would make your code simpler.

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>;
};
user_28042560
Related