ApolloSSR

Usage

See SSR guide.

Methods

install

Install the SSR plugin only on the server with:

Vue.use(ApolloSSR)

You can pass additional options like this:

Vue.use(ApolloSSR, {
  fetchPolicy: 'network-only',
  suppressRenderErrors: false,
})

fetchPolicy

When an Apollo query is prefetched, it's recommended to override fetchPolicy to force the queries to happen.

Default value: 'network-only'.

suppressRenderErrors

Silent the fake render errors.

Default value: false.

prefetchAll

Prefetches all queued component definitions and returns a promise resolved when all corresponding apollo data is ready.

await ApolloSSR.prefetchAll (apolloProvider, componentDefs, context)

context is passed as the argument to the prefetch options inside the smart queries. It may contain the route and the store.

getStates

Returns the apollo stores states as JavaScript objects.

const states = ApolloSSR.getStates(apolloProvider, options)

options defaults to:

{
  // Prefix for the keys of each apollo client state
  exportNamespace: '',
}

exportStates

Returns the apollo stores states as JavaScript code inside a String. This code can be directly injected to the page HTML inside a <script> tag.

const js = ApolloSSR.exportStates(apolloProvider, options)

options defaults to:

{
  // Global variable name
  globalName: '__APOLLO_STATE__',
  // Global object on which the variable is set
  attachTo: 'window',
  // Prefix for the keys of each apollo client state
  exportNamespace: '',
}

globalPrefetch

Allow you to register a component to be prefetched explicitely.

Simple example:

import MyComponent from '@/components/MyComponent.vue'

ApolloSSR.globalPrefetch(() => MyComponent)

You can disable prefetching depending on context:

ApolloSSR.globalPrefetch(context => {
  if (context.route.name === 'foo'){
    return MyComponent
  }
})

mockInstance

During prefetchAll, the app components tree is re-created with fake instances so the process is faster. You can apply plugins to modify the fake instances to prevent their render functions to crash if you have helpers like this.$http that is accessed in the template or render function (typically Undefined error). It's recommended to mock those helpers to improve performance.

const noop = () => {}

ApolloSSR.mockInstance({
  apply: vm => {
    // Mock $http
    vm.$http = noop
  },
})
Last Updated: 11/8/2018, 5:38:11 PM