Method for integrating vue-apollo with vue-router's navigation guards?

[GregPeden]

vue-router includes a Navigation Guard feature which, among other things, is useful for delaying the display of the next page until some API data is retrieved. This is meant to make the page function more like server-side rendered site until API data is fetched and avoids having to create "loading" views for every page.

Reference: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

So in particular "beforeRouteEnter()" would be useful for apollo except it doesn't have access to the component context this since it is evaluated before loading the rest of the component. Can anyone suggest a way to take advantage of this feature while integrating well with vue-apollo?

[jpikora]

You have to export your apolloClient instance and import where you need it, then do requests directly via apollo. Something like this:

// apollo.provider.js

...

export const apolloClient = new ApolloClient({
  link,
  cache,
  ...
})

export default new VueApollo({
  defaultClient: apolloClient,
  defaultOptions: {
    ...
  },
  errorHandler () {}
})

...

// apollo.service.js

import { apolloClient } from 'apollo.provider'
import gql from 'graphql-tag'

const queries = {
  ...,
  verifyResetPasswordToken (options = {}) {
    return apolloClient.query({
      query: gql`
        query verify ($token: String!) {
          result: verify_reset_password_token (token: $token)
        }
      `,
      fetchPolicy: 'no-cache',
      ...options
    })
      .then(({ data: { result } }) => {
        if (!result) {
          throw Error('Invalid token')
        }
      })
  },
  ...
}

export default {
  queries,
  ...
}

// page-user-password-reset.js

import apolloService from 'apollo.service'

const pageGuard = (to, from, next) => {
  apolloService.queries.verifyResetPasswordToken({
    variables: {
      token: to.params.token
    }
  })
    .then(() => next())
    .catch(() => next({
      name: 'PageErrorNotFound'
    }))
}

export default {
  name: 'PageUserPasswordReset',

  beforeRouteEnter: pageGuard,
  beforeRouteUpdate: pageGuard,

  ...
}

[udemezue01]

did not wotk

[PavolHlavaty]

@jpikora worked for me :) thanks... Note that you can do apolloClient.query(...) and apolloClient.mutate(...) directly in guard, no need to create a service if you don't want to.