[WIP] Possible evolution of the Relay integration with Next.js

[alunyov]

Note: This is WIP and not ready to be merged. I’m sharing for feedback and adjustments on the direction.

Summary:

• Data-fetching for routes is happening in the Relay Server Components, using fetchQuery this version is different from what we export from relay-runtime - (maybe we’ll need a different name). Internally, it fetches the query, publish to the relay store. This fetchQuery can only be called on the server.

• RelayRoot - RSC, simple wrapper, that passes serialized list of fetched queries to the RelayClientRoot

• RelayClientRoot - client component that wraps the children with Relay context provided, and publishes the fetched server queries to the client store, so the state of the local store is matching the one on the server.

  • Everything under this RelayClientRoot is normal client-first relay with hooks and things... But there is no root query component (with usePreloadedQuery or similar...)

• Instead of useFragment on the server we can use readFragmentData function - this will allow for individual server components define own data requirements, and the view will be fully server-rendered, with possible client leafs. The fragments composed into a query and fetched in the top RSC with fetchQuery.

• • * So, this is a “sketch” of the possible integration, so many things may not work:

• Preserving the state of the store, when navigating between the list and the issue view

• Multiple leafs with RelayClientRoot

Not sure if it’s working:

• useLazyLoadQuery - under RelayClientRoot.
• 3D/queryPreloading
• stream/defer

[alunyov]

Also, worth noting: this version publish of the same query payload 3 times (maybe more): two times on the server, for SC and under each RelayRoot. And then on the client, under RelayClientRoot.

[sibelius]

Can we find a way to use the same function “useFragment” on both client and server?

[alunyov]

Can we find a way to use the same function “useFragment” on both client and server?

Well, since readFragmentData this is not part of the core framework, you can name it useFragment, but for the sake of example, and to be explicit (and avoid possible confusion) I named it differently.

[a-marcel]

Lächeln Am 11. Jan. 2023, 13:41 +0100 schrieb Andrey Lunyov @.***>:

Can we find a way to use the same function “useFragment” on both client and server? Well, since readFragmentData this is not part of the core framework, you can name it useFragment, but for the sake of example, and to be explicit (and avoid possible confusion) I named it differently. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[alunyov]

Ugh... Accidentally pushed this to the main branch. Already reverted, I'll resubmit PR.

[alunyov]

Re-opened as https://github.com/relayjs/relay-examples/pull/270