Error/redirection functionality for Smart Queries error hook

[it-sha]

What problem does this feature solve?

Hook asyncDate({error}){...} has the option to handle errors with redirection to the error page that works fine in client-side and server-side.

For Appollo Smart Queries it seems like we have no options to do that on server side We have this problem from 2017 (ex. https://github.com/nuxt-community/apollo-module/issues/42) but it seems like we have no solution for smart query and have to use code like

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

but Smart Query is a much more elegant solution and gives many benefits.

What does the proposed changes look like?

apollo: {
    queryName: {
        query: someGql,
        update: (data) => data.allPets,

        error({ errorData, redirect }) {
            const statusCode = errorData.networkError.statusCode;
            if(statusCode = 404){
                redirect('/404')
            }
        },
    },
},

_{This feature request is available on Nuxt community (#c364)}

[it-sha]

Hi, @dohomi . Thank you for your help in https://github.com/nuxt-community/apollo-module/issues/42

Could you please give any advice? Do we have in 2021 any possibility to handle errors with Apollo Smart Query with redirection to 404 page that works not only for client-side but also for server-side rendering?

[jamesmorgan]

Also suffering from this problem - tried pretty much ever trick I can find on google to fix it. Only thing which works is not using smart queries and using asyncData with a catch/handler and redirect.

My use case is when hitting a 3rd party GQL endpoint, this something goes does and then fails with a Unexpected token < in JSON at position 0 as the service is returning some non JSON error page.

Atm when it happens makes the app fall over with a big bang, even with a custom error handler I cannot seem to stop it and doing a redirect also doesnt work, like the error to lower down the stack and non recoverable.

To avoid this I have moved all the queries to using asyncData but its a massive refactoring effort.

Would love to be able to properly handle these issues and still use a smart query.

[toddpadwick]

There are so many issues around Smart Queries and SSR error handling but no real solution that I can find 😔 .
As far as I understand, the main reason for opting for Nuxt is its SSR benefits (for SEO reasons). So unless I am missing something, Apollo Smart Queries are not fit for purpose.

We have a huge Nuxt app that we've been building and so I am dreading having to refactor all our smart queries into asyncData ones.

@jamesmorgan Did you end up refactoring or did you find a way to make Smart Queries work? If you did end up using async data it would be massively helpful if you could share an example. I'm not very familiar with using it.

[reinoldus]

For those waiting for a fix: Probably not going to happen with nuxt2. I assume it's related to a similar issue about the fetch hook: https://github.com/nuxt/nuxt.js/issues/7285

The reason why the fetch hook can't return 404 errors:

[jamesmorgan]

@jamesmorgan Did you end up refactoring or did you find a way to make Smart Queries work? If you did end up using async data it would be massively helpful if you could share an example. I'm not very familiar with using it.

@toddpadwick Unfortunately we changes all our smart queries to inline queries which we can than handle better when things go wrong. A rough example is along the lines of this:

    this.$apollo.addSmartQuery('mySmartProp', {
      client: this.client,
      query: MY_QUERY,
      error(error, vm, key, type, options) {
        // Handle when things fail
      }
    });

It was a fairly painful experience refactoring this but once its done its okay from our experience.

[reinoldus]

@jamesmorgan in what hook do you add the queries?

Does it work fine with $apollo.queries.loading in the template?

[cschweda]

I have a similar question -- if an Apollo query returns 0 results from a page slug -- how do I redirect to an error page?

Using Nuxt (latest) and Apollo.