Apollo-module: $apollo undefined in context.app

[RSchwan]

If i try to use apollo in fetch or asyncData, $apollo is not defined in context.app:

async fetch ({ app, store }) {
  const { data } = await app.$apollo.query({
    query: gql`query { posts: { id } }`
  })
}

For now I use this work around but I'm just curious why $apollo isn't defined.

async fetch ({ app, store }) {
  const { data } = await app.apolloProvider.defaultClient.query({
    query: gql`query { posts: { id } }`
  })
}

_{This question is available on Nuxt.js community (#c10)}

[Samuell1]

Hey, you can use apollo object

Like here: https://github.com/nuxt/nuxt.js/blob/dev/examples/vue-apollo/pages/index.vue

  apollo: {
    allCars: {
      prefetch: true,
      query: allCars
    }
  },

[RSchwan]

The problem is that I use Vuex and I populate my store in the fetch method.

[dohomi]

@RSchwan you can still do this:

apollo:{
  allCars:{
    prefetch:true,
    query: allCars,
    result({data}){
       this.$store.dispatch('cars',data.allCars)
    }
  }
}

Does this resolve your issue?

[RSchwan]

Not really. The nice thing about the fetch method is that you get the loading indicator for free and you are guaranteed that the data is 100% loaded.

[dohomi]

@RSchwan the prefetch:true is making sure that from SSR everything will be fetched. for loading indicators you can use:

// Loading state
    // loadingKey is the name of the data property
    // that will be incremented when the query is loading
    // and decremented when it no longer is.
    loadingKey: 'loadingQueriesCount',
    // watchLoading will be called whenever the loading state changes
    watchLoading(isLoading, countModifier) {
      // isLoading is a boolean
      // countModifier is either 1 or -1
    },

to hook the global spinner you can follow this issue: https://github.com/nuxt-community/apollo-module/issues/16

Beside that I think app.apolloProvider.defaultClient.query is anyway the right way to do this on server side so its a legit way of doing it.

[yann-yinn]

same question here. I had to do a first query to get an id, then a second request depending on this id, i'm not sure that i can do this with "apollo" component key.

Calling $apollo manually in asyncData seems the easiest way, am i wrong ?

[yann-yinn]

Here is how i did for now :

  async asyncData ({ app, params }) {
    // get tag by its slug
    let result = await app.apolloProvider.defaultClient.query({
      query: tagByAlias,
      variables: { 'path': '/' + params.slug }
    })
    const tag = result.data.route.entity
    // get post lists by tag id
    result = await app.apolloProvider.defaultClient.query({
      query: postsQueryByTag,
      variables: { 'tid': tag.id }
    })
    return {
      tag,
      postsQueryByTag: result.data.postsQueryByTag
    }
  }

[Samuell1]

Why you dont use it like this? https://github.com/Samuell1/vue.sk/blob/master/pages/_code/index.vue#L47

[yann-yinn]

@Samuell1 that's what i do when there is one request (like here : https://github.com/nyl-auster/yineo-nuxt-wordpress/blob/8f68a0de6234be74bb072036a760520e0ac56c20/pages/blog/index.vue#L25 ) , but in above example, I have two requests, the second depending on the result of the first.

I don't know how to do this inside an "apollo" key

Hope we understand each other, not easy to explain :-p

[dohomi]

@RSchwan I will close this issue for now. Use the result hook with prefetch:true and it should give you the expected behavior.

[BorisTB]

If someone will be looking for an answer here like I did, in Vuex store you have to get client like this
const client = this.app.provide.$apolloProvider.defaultClient

[evseevnn-zz]

@BorisTB I trying do it in nuxtServerInit method and getting error networkError: TypeError: Cannot read property 'get' of undefined

[Samuell1]

@evseevnn just use this.app.apolloProvider.defaultClient

[evseevnn-zz]

@Samuell1 i trying do something like this inside nuxtServerInit method

const client = this.app.apolloProvider.defaultClient
const response = await client.query({ query: me })

and got Network error: Cannot read property 'get' of undefined

[evseevnn-zz]

@Samuell1 inside me just query wrapped in gql tag

[dohomi]

@evseevnn check out the nuxt docs about the right usage of nuxtServerInit:
https://nuxtjs.org/guide/vuex-store#the-nuxtserverinit-action

 nuxtServerInit ({ commit }, { req,app }) {
    const client = app.apolloProvider.defaultClient
    (...)
  }

[evseevnn-zz]

@Samuell1 @dohomi Sorry guys that because of i getting error in response from graphql server.
Sorry for disturb.

[edgecaststudio]

@RSchwan evseevnn-zz . Hi. I know you posted this a long while but but how did you get the me query to work in nuxtServerInit? I can only get it to work with a create hook but that doesn't work well cause if you refresh it takes your data out for a second. I'd love to get this working. Please help if possible. Thank you ahead of time.