useQuery fails to resolve ssr renderPromise due to JSON.stringify reordering
cclp94 opened this issue · 7 comments
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).
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
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.
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.
I am also willing to make the contribution if you are short on time. Let me know.
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-20240422143231I just tested it and it seems to fix our issue. Thank you for the help.
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.