Access to this.$apollo from Vuex store with vue-apollo in NUXT?

Question

I want to store the user that comes from the login on an action in the vuex store. But there is no access to this.$apollo.

export const actions = {
  UPSERT_USER({ commit }, { authUser, claims }) {
     this.$apollo
        .mutate({
          mutation: UPSERT_USER_MUTATION,
          variables: {
            id: user.uid,
            email: user.email,
            name: user.name,
            picture: user.picture,
          },
        })
    }

Thanks!

score 7 · Accepted Answer · answered May 09 '20 at 18:41

7

You should be able to access it like this:

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

Check out the https://github.com/nuxt-community/apollo-module

answered May 09 '20 at 18:41

ajobi

2,996
3
13
28

Hi, thanks for the answer, it works in this way. The problem is that when the mutation is called, onUserChange, `this.app.apolloProvider` is yet undefined. I fixed it with a sleep of 1 second... but I don't think that is a good idea. Do you know how to wait for apolloProvider to be ready on the store? then execute the mutate()? – ctwhome May 10 '20 at 06:13
Hmm yes sleeping for a second is not a good idea. Hard to say, but I am pretty sure you are not the first one dealing with apollo in store. Try to search for that a bit, probably your solution is somewhere out there waiting for you to find. I don't know honestly right now ;( – ajobi May 10 '20 at 09:06
yes, thank you. I am using the Firebase Nuxt module, which calls an action when the user is logged in, but at the time the apollo provider is not yet ready in the store. – ctwhome May 11 '20 at 10:31

score 1 · Answer 2 · answered Jan 08 '21 at 14:23

Because I inject apolloProvider in my nuxt apollo plugin using,

inject("apollo", apolloProvider);

Then in my case I access it using,

export default {
  actions: {
    foo (store, payload) {
        let apolloClient = this.$apollo.defaultClient
    }
  }
}

Access to this.$apollo from Vuex store with vue-apollo in NUXT?

2 Answers2

Linked