What's the correct method of using Apollo & GraphQL caching instead of Vuex?

I’ve been experimenting with Apollo & GraphQL. I’ve read that you can utilise the cache instead of requiring Vuex - but I can’t wrap my head around how to do so, without creating some sort of anti-pattern of combining the two.

For instance, let’s say I call in the GraphQL data on router.beforeEach(), I can retrieve the data with no problem, but then if I try to query the cached data from the newly loaded component - I can’t seem to see it in the cache, or be able to query the cached items. Yet, if I call the queries directly in a component, and go back to the component, the data is cached to the component itself.

Am I supposed to write a set of resolvers and mutations to assign the queried data? Has anyone got examples of how they’ve approached this situation?

What I’m trying:

Using Vue Apollo’s CLI installation:

vue add apollo

After setting up the configurations in ./vue-apollo.js, I added an export to the provider and default options:

export const defaultOptions = {
  // ...all the default settings
}

export function createProvider (options = {}) {
  // Create apollo client
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler (error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    },
  })

  return apolloProvider
}

In ./router/index.js
Import the apollo provider, options, and query…

import { createProvider, defaultOptions } from '../vue-apollo'
import gql from "graphql-tag"
import pageQuery from '@/queries/page-query.gql'

on beforeEach:

router.beforeEach((to, from, next) => {
  const client = createProvider(defaultOptions).defaultClient

  if(to.name == 'page') {
    client.query({
      query: pageQuery,
      variables: {
        slug: to.params.slug
      }
    })
    .then(res => {
      if (res.data.pageQuery.length > 0) next()
      else next('/')
    })
    .catch(() => next('/'))
  }

  next()
}

I get a successful response doing that.
I can log all the data in the promise, with no issues.

But how do I access that query from other components now?
I could easily just dispatch the data to Vuex, but doesn’t that defeat part of the purpose of GraphQL?

I’ve tried having a seperate query with @client assigned to the components, but it either breaks or returns undefined.