Vue-apollo: How to use Apollo Client in js file?

[thetre97]

No doubt I'm missing something obvious - I apologize in advance because I'm new to all this :)

I'm trying to use Auth0 to authenticate requests to Graphcool. I have a Vue app, copied from the Auth0 tutorial, which when authenticated etc returns an id_token. To my understanding, this then needs to be sent to the graphql backend, to use the authenticateUser mutation to create/check if a user exists in the db, and then it returns a token which can be used to authenticate further graphcool requests.

My question is, how do I use this.$apollo in a javascript file, not a Vue Component? Do i need to import a package or something? I thought to put the authenticateUser mutation in this file https://github.com/auth0-samples/auth0-vue-samples/blob/master/01-Login/src/auth/AuthService.js so it returns a token, which can be set to local storage. But when I use this.$apollo it logs an error that it is undefined.

I would be grateful for any help!

[Akryum]

You can use the apollo client directly.

[thetre97]

thanks - and again, apologies for the newbie questions, but how do I do that?
I added import { apolloClient } from 'apollo-client' then tried using apolloClient.mutate, but it threw this: Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_7_apollo_client__.a.mutate is not a function?

[Akryum]

You need to use the apolloClient you created (the one you used in apolloProvider).

[thetre97]

ah, got it, thank you!

[eddivalen]

Hey guys! I got the same issue, could you show me an example of how to use apollo client in a js file? @thetre97 @Akryum

[thetre97]

Assuming you used the vue add apollo command, you will get a vue-apollo.js file in the src folder.
In that file, there is a function like so:

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
}

You will need to move these lines (where it is creating the actual apollo client) outside of the function, and turn it into an export.

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

export function createProvider () {
...

You can then use this in any file, by simply importing it, and using it instead of this.$apollo:

import { apolloClient } from '@/vue-apollo' // @ is an webpack alias to the src/ folder

apolloClient.query({
    query: gql`{hello}`
}).then(data => console.log(data))