Relay (GraphQL)

With Vike you have full control over rendering, data fetching, data management, and HTML streaming. Integrating Relay is mostly a matter of following its official SSR guide: Relay > #3468 - SSR docs (comment). (Vike saves you from "fighting the framework".)

Reading Recommendation.

When using a GraphQL tool such as Relay, you define GraphQL queries/fragments on a component-level, while fetching the GraphQL data in a single global hook (usually onBeforeRender()/onRenderHtml()/onRenderClient()).

On a high-level, the integration works like this:
  1. You fetch the initial data on the server-side. (You do it on the server-side so that the initial data is rendered to HTML.)
  2. You make the initial data available as pageContext.initialData.
  3. You make pageContext.initialData available on the client-side by adding 'initialData' to passToClient.
  4. You initialize Relay on the client-side using pageContext.initialData.

React Streaming

For using Relay with React Streaming, see:

Example

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