Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3.3.0] Queries during SSR is always skipped. #7380

Closed
yashok111 opened this issue Nov 26, 2020 · 3 comments · Fixed by #7567
Closed

[3.3.0] Queries during SSR is always skipped. #7380

yashok111 opened this issue Nov 26, 2020 · 3 comments · Fixed by #7567

Comments

@yashok111
Copy link

Intended outcome:
Queries should be completed during renderToStringWithData and return HTML with data.

Actual outcome:
We have chained queries, that must wait data from another query. Looks like during rendering on server, all queries's skip option is always true, even if it changed. I have narrow this issue to 3.3.0-rc.3, the #7310 was introduced in it, maybe this is causing the problem. On 3.3.0-rc.2 everything work fine.

How to reproduce the issue:
Sorry, but I don't have time to create repo(. Hope, description above is enough.

Versions:
System:
OS: macOS 10.15.7
Binaries:
Node: 14.13.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: 87.0.4280.67
Edge: 87.0.664.47
Firefox: 82.0.2
Safari: 14.0.1
npmPackages:
@apollo/client: 3.3.1 => 3.3.1
apollo-upload-client: 14.1.3 => 14.1.3
react-apollo-network-status: 5.0.1 => 5.0.1

@benjamn
Copy link
Member

benjamn commented Nov 30, 2020

@yashok111 Can you show a small example of how you're changing skip to false? I think you're probably right that #7310 triggered this change in behavior, but I'm curious why this.getOptions().skip remains true after you change it.

@yashok111
Copy link
Author

yashok111 commented Dec 3, 2020

Screenshot 2020-12-03 at 13 32 47

Sorry for long response. In this example if tag is not provided query is skipping, and it's causing loading state to be always true on Server and render Placeholder component. If I provide tag everything work fine in this case.

@BowlingX
Copy link

Same problem here, when skip is true on the server loading is also true. On the client loading is false. This causes hydration issues as we render e.g. a spinner on the backend but none on the client.

rgrove added a commit to rgrove/apollo-client that referenced this issue Jan 11, 2021
PR apollographql#7310 introduced a regression that caused skipped SSR queries to
always set `loading` to `true`, which doesn't match the behavior of
`useQuery()` on the client and can result in hydration mismatches.

The problem is that `skip: true` was being treated as equivalent to
`ssr: false`, but they're not actually equivalent. I think the correct
solution is to let `this.getQueryResult()` provide a suitable result
when `skip` is truthy, which ensures that skipped SSR queries will get
the same result as skipped non-SSR queries.

Fixes apollographql#7380
benjamn added a commit that referenced this issue Jan 14, 2021
PR #7310 introduced a regression that caused skipped SSR queries to
always set `loading` to `true`, which doesn't match the behavior of
`useQuery()` on the client and can result in hydration mismatches.

The problem is that `skip: true` was being treated as equivalent to
`ssr: false`, but they're not actually equivalent. I think the correct
solution is to let `this.getQueryResult()` provide a suitable result
when `skip` is truthy, which ensures that skipped SSR queries will get
the same result as skipped non-SSR queries.

Fixes #7380

Co-authored-by: Ben Newman <ben@apollographql.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants