facebook / facebook/relay

useLazyLoadQuery execution on Next 13 and React 18

Open
#4,195 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

I'm seeing a somewhat surprising behaviour of `useLazyLoadQuery` on Next 13 and React 18. It seems that `useLazyLoadQuery` fetches the data within render, instead of being a noop on the server.

This is a bit surprising. How would achieve it being a noop on the server (and/or make it suspend), and only fetch it on client?

Another tricky thing with this new behaviour is that the `initialRecords` are usually gathered in the `getServerSideProps` method, and the queries that run within render are executed after, and thus won't be sent to the client to be hydrated. This means that another query will be issues client side, which will lead to server/client missmatches.

Contributor guide

Open the contributing guide

Research direction

No files or tests are named. Reproduce useLazyLoadQuery with Next 13, React 18, getServerSideProps, and initialRecords, then trace server rendering and client hydration to establish the intended behavior. Done requires an agreed server no-op or suspension model that avoids duplicate client fetches and server/client mismatches.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.