Query response object changes ordering of response

[Svarto]

Hi, I am have a query that retrieves an object of recipe ingredients. I am trying to compare this against an existing object, and I have been trying to do it through JSON.stringify to avoid a too expensive operation of checking each individual nested object.

I am running into the problem that the Query response object is changing order of the nested objects, and I can't figure out why. See here, this is the same object just 2 render a part (I am using React Native):

INITIAL DATA {"id":1078,"order":0,"details":"","measure":"g","amount":100,"section":false,"ingredient":{"name":"couscous","__typename":"ingredients"},"recipe_ingredients_images":[],"__typename":"recipe_ingredients"}
INITIAL DATA {"__typename":"recipe_ingredients","id":1078,"order":0,"details":"","measure":"g","amount":100,"section":false,"ingredient":{"__typename":"ingredients","name":"couscous"},"recipe_ingredients_images":[]}

As you can see, they contain the same information but the first starts with the "id" nested object while the second has reordered and now starts with __typename.

Is this expected behaviour or is there something I can do to ensure that the return queries always return the same structure of the object? Is there something async going on behind the scenes in URQL that orders the query response after it has been received?

Apologies for the many questions, this has been a bit of a headscratcher for me

[kitten]

Hm, I believe you're using @urql/exchange-graphcache, since I just realised it will always add __typename first, regardless of when it has been requested. cc @JoviDeCroock we may just want to ditch it from automatically being added to objects. Otherwise the ordering looks really consistent to me.

What happens when you receive a response from the server is that it's "enhanced" by Graphcache in that it may be mutated with resolvers when it comes back from the API. Subsequently responses are virtually generated just from cache, so you may see this small transition on an initial mount sometimes, depending on React's timing.

I believe we could totally ship an enhancement for this, since I'd say this is a little confusing;

That being said, I would say if you're comparing the results using JSON.stringify we should address this root cause as well. I'd actually recommend you to use react-fast-compare or a similar comparison library here instead, which is fast/cheaper and doesn't care about ordering as we'd expect from JSON results for GraphQL https://github.com/FormidableLabs/react-fast-compare

[kitten]

@Svarto I forgot to leave an update here. We actually just landed a PR that increases the consistency of responses from Graphcache, which should address this: #1185