Apollo (GraphQL)

You can use Vike with Apollo GraphQL.

This page documents how to manually integrate Apollo.

Instead of manually integrating Apollo yourself, you can use:

💚

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

Initial data

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

Examples

See also