Apollo-module: best practice to use apollo inside of Vuex

[dohomi]

@Akryum @Atinux do you guys have an idea what would be the best practice to attach $apollo or apolloProvider to Vuex and make it accessible inside of actions? Would be great to be able doing:

this.$store.dispatch('mutateGql',variables) 

// inside of store.js
mutateGql({apollo?},context){
// => how to get current apollo instance inside of the action?
}

Any thought how to do this with this module?

_{This feature request is available on Nuxt.js community (#c21)}

[ndarilek]

Would appreciate some guidance on this as well. Maybe create the store manually, creating modules in a function, and passing the store into that function? Alternatively, it'd be nice if:

import client from '~/apollo/clients/default'

or something similar pulled in that particular named client.

[Akryum]

See https://github.com/Akryum/vue-apollo/issues/140

[emilsgulbis]

+1 for guidance / example for this one!
Can't figure out best approach here, but found that axios is accessible inside of actions and described here.
https://github.com/nuxt-community/axios-module

[bjunc]

You can access the apollo clients in Nuxt Vuex via this. For instance:

export default {
  actions: {
    foo (context) {
      let client = this.app.apolloProvider.defaultClient
    }
}

If you wanted to make an Apollo call via a page's asyncData, it'd look something like this:

asycData (context) {
  let client = context.app.apolloProvider.defaultClient
}

Notice, in asyncData, the app is assigned to context. That is not the case in the store. Worth noting, app _is_ assigned to context in nuxtServerInit. For example:

nuxtServerInit (store, context) {
  let client = context.app.apolloProvider.defaultClient
}

Lastly, to access Apollo clients in a component method (say, for browser-only functionality), you'd do it this way:

methods: {
  foo () {
    let client = this.$apollo.provider.defaultClient
  }
}

Those are probably the four likely ways you'll need to be accessing Apollo. Unfortunately, they're four _different_ ways, but they are somewhat justified. I would recommend this be documented somewhere, as it is kind of confusing, and takes some trial and error of logging to console and inspecting vars to figure this out.

[dohomi]

@bjunc thanks for this, I will append these examples to the README file!

[dohomi]

I added the information to cover most usecases

[bjunc]

Happy to help :)

[georgeboot]

@bjunc what is the current way to do this? I can't seem to get it working: Cannot read property 'app' of undefined

My store:

// store/index.js

// ...

export const actions = {
    callApollo: async (context) => {
        const response = await this.app.apolloProvider.defaultClient.query({
            // ...
        })
    }
}

[bjunc]

@georgeboot, I believe you lost your scope. Try this:

export const actions = {
  async callApollo (context) {
    const response = await this.app.apolloProvider.defaultClient.query({ ... })
  }
} 

[ahmedShawareb567]

@bjunc ,, user.ts?7a93:38 Uncaught (in promise) TypeError: Cannot read property 'apolloProvider' of undefined .... when using with vuex module decorator nuxt-app with typescript,,, i need to fix this issues ...????

[DNature]

@georgeboot, I believe you lost your scope. Try this:

export const actions = {
  async callApollo (context) {
    const response = await this.app.apolloProvider.defaultClient.query({ ... })
  }
} 

This fine, However, "this" is undefined when used inside "getters"