apollo: $apollo undefined in context.app

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 } }`
  })
}

<div align="right">_{This question is available on Nuxt.js community (#c10)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (4 by maintainers)

Most upvoted comments

I am using const client = this.app.apolloProvider.defaultClient in my store/index.js file and I’m getting undefined error. it seems this.app doesn’t contain apolloProvider. anyone facing the same issue?

lunawen on Jul 25, 2021

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.

RSchwan on Aug 30, 2017

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

BorisTB on Feb 17, 2018

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
    }
  }

yann-yinn on Aug 31, 2017