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

[cclp94]

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

[phryneas]

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]

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]

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

[phryneas]

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]

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

[github-actions]

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]

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.