search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.33k stars 2.65k forks source link

useQuery fails to resolve ssr renderPromise due to JSON.stringify reordering #11798

Closed cclp94 closed 5 months ago

cclp94 commented 5 months ago

Issue Description

We found a bug in production where the lookupQueryInfo() method would consistently not render a SSR component after calling renderToStringWithData.

Upon investigation, we found that the query was being executed and the result should have been available. However, a second QueryInfo would be registered instead of recovering the resolved one. This is due to the JSON.stringify method switching the order of attributes when looking up the Map (Check screenshots).

Screenshot 2024-04-19 at 4 27 10 PM Screenshot 2024-04-19 at 4 28 15 PM

I noticed the utilities package already provides a canonicalStringify which would fix this issue.

Link to Reproduction

https://github.com/apollographql/apollo-client/blob/main/src/react/ssr/RenderPromises.ts#L140

Reproduction Steps

No response

@apollo/client version

3.8.3

phryneas commented 5 months ago

That's interesting - are you passing different variables in different situations here?
I don't think that Apollo Client ever touches variables in a writing manner, and JSON.stringify would always stringify things in the object order.

That said, using canonicalStringify absolutely makes sense here. I'll prepare a fix.

cclp94 commented 5 months ago

Amazing, @phryneas. Thank you for the fast response.

That's exactly what I found weird about it. We don't pass different variables to it (although I guess the react re-rendering recreates the objects/variables that are passed when the functional component gets re-executed). I tried getting JSON.stringify to reproduce the issue in isolation but couldn't.

cclp94 commented 5 months ago

I am also willing to make the contribution if you are short on time. Let me know.

phryneas commented 5 months ago

I was already in the middle of the PR :)

Could you try this build and report if it fixes your problem?

npm i @apollo/client@0.0.0-pr-11799-20240422143231
cclp94 commented 5 months ago

I just tested it and it seems to fix our issue. Thank you for the help.

github-actions[bot] commented 5 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

github-actions[bot] commented 4 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.