Apollo is mixing results from a GraphQL Query in React

user_1604072 0
Viewed 488

I am making a call that returns questions and their answers. When I make this directly to the server, the response is as expected. Additionally, when react makes the call and I check developer tools, the response is as expected.

Once I get a response from Apollo, the data is mixed and results are bleeding into one another.

You will notice in these two images, the results are the same after a few results are expanded. I am not sure what could be causing this.

enter image description here

enter image description here

Why would freeform be combining?

My setup is like this:

I import the query and then run this on the client which is Apollo:

this.props.client.query({ query: getCoreObjectsQuery, variables: { companyId: 1}})
              .then((result) => {
                console.log(result, 'getCoreObjectsQuery')

From there, when I go to look at getCoreObjectsQuery, it looks like the above images!

react-apollo apollo graphql reactjs
1 Answers

Wow! Turns out to be an Apollo Client caching error.

Kamranicus.com has a really helpful article on this, but to anybody looking for a quick fix:

__typename @skip(if: true)

questions{
      id
      __typename @skip(if: true)
      coreId
      question
      isCore
      type
      answer:answerForCoreId{
         id
         __typename @skip(if: true)
         freeform
         url
         choice {
           id
           __typename @skip(if: true)
         }
       }
    }

id and _id cache!

user_16040720
Related