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:

React Streaming

For using Relay with React Streaming, see:


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

See also

See also: