GraphQL: react-apollo client overwrites array elements

Question

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?

It's not really practical to post code that involves a GraphQL schema, a server, a react application and a react-redux implementation. In this case though I'm not sure it's necessary - I'm asking if there are any common reasons for misconfigurations that might cause this. — duncanhall
– duncanhall, Commented Jul 7, 2017 at 11:37
Since you said GraphiQL gives you the expected result, I think your server code does not have issues. The problem could be on the client side. I recollect any common reasons. i.e reducers? — Sherin Mathew
– Sherin Mathew, Commented Jul 7, 2017 at 11:50

duncanhall · Accepted Answer · 2017-07-07 14:44:41Z

5

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

answered Jul 7, 2017 at 14:44

duncanhall

11.5k6 gold badges61 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cam Jackson Over a year ago

It appears you also get this strange behaviour if id is present but is an object. My query was returning a JSON structure like [{ "id": { "value": 1 } }, { "id": { "value": 2 } }], and apparently that doesn't work. I've flattened my data out and now it works.

Collectives™ on Stack Overflow

GraphQL: react-apollo client overwrites array elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related