urql (GraphQL)

You can use Vike with urql.

This page documents how to manually integrate urql.

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

Initial data

When using a GraphQL tool such as urql, 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 urql 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:

Example

See also