apollo/docs/api/apollo-provider.md

ApolloProvider

Constructor

const apolloProvider = new VueApollo({
  // Multiple clients support
  // Use the 'client' option inside queries
  // or '$client' on the apollo definition
  clients: {
    a: apolloClientA,
    b: apolloClientB,
  },
  // Default client
  defaultClient: apolloClient,
  // Default 'apollo' definition
  defaultOptions: {
    // See 'apollo' definition
    // For example: default query options
    $query: {
      loadingKey: 'loading',
      fetchPolicy: 'cache-and-network',
    },
  },
  // Watch loading state for all queries
  // See 'Smart Query > options > watchLoading' for detail
  watchLoading (isLoading, countModifier) {
    loading += countModifier
    console.log('Global loading', loading, countModifier)
  },
  // Global error handler for all smart queries and subscriptions
  errorHandler (error) {
    console.log('Global error handler')
    console.error(error)
  },
})

Use the apollo provider into your Vue app:

new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App),
})

Methods

provide

Use this to inject the provider into an app:

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  render: h => h(App),
})

prefetchAll

(SSR) Prefetch all queued component definitions and returns a promise resolved when all corresponding apollo data is ready.

await apolloProvider.prefetchAll (context, componentDefs, options)

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

options defaults to:

{
  // Include components outside of the routes
  // that are registered with `willPrefetch`
  includeGlobal: true,
}

getStates

(SSR) Returns the apollo stores states as JavaScript objects.

const states = apolloProvider.getStates(options)

options defaults to:

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

exportStates

(SSR) 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 = apolloProvider.exportStates(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: '',
}

Other methods

willPrefetch

Tells vue-apollo that some components not used in a router-view (and thus, not in vue-router matchedComponents) need to be prefetched, with the willPrefetch method:

import { willPrefetch } from 'vue-apollo'

export default willPrefetch({
  apollo: {
    allPosts: {
      query: gql`query AllPosts {
        allPosts {
          id
          imageUrl
          description
        }
      }`,
      prefetch: true, // Don't forget this
    }
  }
})