urql (GraphQL)

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

Reading Recommendation.

When using a GraphQL tool such as urql, 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 urql on the client-side using pageContext.initialData.

Example