Relay (GraphQL)

You can use Vike with Relay.

This page documents how to manually integrate Relay.

There isn't a Vike extension for Relay yet, but contribution welcome to create one.

Initial data

When using a GraphQL tool such as Relay, you can define GraphQL queries/fragments on a component-level, instead of using the page-level Vike hook data().

Integration example:

1. Fetch the initial SSR data on the server-side.

   For example in onBeforeRender(), or onRenderHtml() if you don't use vike-react/vike-vue/vike-solid.

2. Make the initial SSR data available as pageContext.initialData.

   See API > pageContext > Custom.

3. Make pageContext.initialData available on the client-side.

   See API > passToClient.

4. Initialize Relay on the client-side with pageContext.initialData.

   For example in onBeforeRenderClient(), or onRenderClient() if you don't use vike-react/vike-vue/vike-solid.

See also:

• GitHub> facebook/relay > #3468 - SSR docs (comment)
• nextjs-relay-streaming-ssr, which has an explanation in the Readme on how it works.
• Integration > Data Tools > Initial data

React Streaming

For using Relay with React Streaming, see:

• Guides > HTML Streaming > Initial data after stream end
• Relay - #3762 React 18 docs

Example

Example of a deep Relay integration with React 18's new SSR Suspense Render-as-you-Fetch architecture:

• 2022.08 GitHub > XiNiHa/vilay

See also

See also:

• GitHub> facebook/relay > #3468 - SSR docs (comment)
• nextjs-relay-streaming-ssr, which has an explanation in the Readme on how it works.
• Integration > Data Tools > Initial data