CODEWITHSUNDEEP
node.jsreactjsgraphqlreact-apollo
duncanhall
duncanhall

Reputation: 11431

GraphQL: react-apollo client overwrites array elements

I have a GraphQL query that returns an array of items. I can run the query in GraphiQL and get the result I expected.

I have a react application that uses react-apollo and the @graphql decorator to resolve the very same query to component props. When running the query via react-apollo, every item in the returned array is the same - each item has been 'overwritten' by the last item.

I can see in the dev-tools network tab that the correct array items were sent over the network, so the issue seems to relate to react-apollo. What could be causing react-apollo to overwrite array elements?

Upvotes: 2

Views: 1006

Answers (1)

duncanhall
duncanhall

Reputation: 11431

The issue was that my qgl fragment for the query did not include the id property for the items in the Array.

If you have a similar issue, ensure your schema includes an id or _id property on each item; that each id value is unique, and that you are requesting the id property in your query. Alternatively you can supply a dataIdFromObject function in your client to dynamically generate IDs for values.

You can read more in the Apollo docs for Normalization with dataIdFromObject

Upvotes: 5

Related Questions