apollo: Unable to use Nuxt's error/redirect functionality when a query failed

I want to call the context.error({...}) to show the Nuxt’s error page when a query failed (Item not found, etc.).

In asyncData(context) {...}, we can easily do that as context is always given.

However inside vue-apollo’s smart queries, I can’t find a way to access the error()

<div align="right">This feature request is available on Nuxt.js community (#c30)</div>

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 23 (11 by maintainers)

Most upvoted comments

@kavalcante @ciscorn haven’t had this implementation on my radar yet. You can gain same result with following code:

async asyncData({error, app, params}){
  const article = await app.apolloProvider.defaultClient.query({
    query: `someGql`,
    variables:{id: params.id}
  }).then(({data}) => data && data.Article)
  if(!article){
    return error({statusCode: 404, message: 'Not found'})
  }
  return {article}
}

Is there any reason why not using asncData directly, you would write actually less code to receive the same result. Setting up a fetch method is slightly redundant in my eyes. I’m not sure if its straight forward to decouple the query call and add the fetch statement to it. @Akryum I’d still be interested if you have any opinion as you have better knowledge in the vue-apollo client.

+1 Definitely would like to see this in the smart query as well.

I see this issue is closed, does that mean smart queries are officially discouraged in favor of asyncData?

Right now I don’t see a way to set the HTTP status code from the server side using a smart query, so instead we must use context.app.apolloProvider.defaultClient.query; definitely less elegant

@aaronransley when using asyncData, the the data will not update with mutations(/changes to cache).