Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

Question

Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

When utilizing Smart Query for redirection, how can we redirect to a 400 page?

While working with Vue Apollo, I attempted the following:

    apollo: {
        queryName: {
            prefetch: true,
            query: wrongQuery,
    
            error(errorData) {
                this.$nuxt.error({
                    statusCode: 500,
                    message: 'Error message',
                });
            },
        },
    };

Unfortunately, if the page is reloaded, the redirection does not function properly due to server-side rendering:

https://i.sstatic.net/H4zhU.png

Even when attempting a global error handler like the one below:

    // /plugins/apollo-error-handler.js
    export default ({ graphQLErrors, networkError, operation, forward }, nuxtContext) => {
        console.log(networkError)
        nuxtContext.error({
          statusCode: 404,
          message: 'Error message',
        });
    };

Only error logging seems to be functional, as redirection remains ineffective.

Is there any method to handle errors within smart queries and redirect to a 400 page, for example?

Can we implement error handling in smart queries similar to try...catch... in asyncData() to prevent application crashes?

javascript vue.js nuxt.js apollo-client vue-apollo

Answer 1

Answer №1

This helpful solution can be found here!

function redirectOnError({ redirect }) {
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.map(({ message }) => {
        if (`${message}` === 'Unauthenticated.') {
          redirect('/login');
          localStorage.setItem('logged', false);
        }
      });
    }
    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
    }
  });
  
  return {
    defaultHttpLink: false,
    link: ApolloLink.from([errorLink, createHttpLink({
      credentials: 'include',
      uri: 'http://localhost:8000/graphql',
      fetch: (uri, options) => {
        options.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');
        return fetch(uri, options);
      }
    })]),
    cache: new InMemoryCache()
  };
}

I hope this solution proves useful for you!
Best regards!

Answer 2

This helpful solution can be found here!

function redirectOnError({ redirect }) {
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.map(({ message }) => {
        if (`${message}` === 'Unauthenticated.') {
          redirect('/login');
          localStorage.setItem('logged', false);
        }
      });
    }
    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
    }
  });
  
  return {
    defaultHttpLink: false,
    link: ApolloLink.from([errorLink, createHttpLink({
      credentials: 'include',
      uri: 'http://localhost:8000/graphql',
      fetch: (uri, options) => {
        options.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');
        return fetch(uri, options);
      }
    })]),
    cache: new InMemoryCache()
  };
}

I hope this solution proves useful for you!
Best regards!

Answer 3

Answer №2

This type of smart query has its limitations, so I prefer to manage it within my Vuex store. While I'm not certain if this is the best practice, it's working well for me at the moment.

async performVuexAction({ dispatch }, { input }) {
  try {
    const { errors, data } = await this.app.apolloProvider.defaultClient.mutate({
      mutation: yourGraphqlMutationHere,
      errorPolicy: 'all',
      variables: {
        input: fancyInput,
      },
    })

    if (errors) {
      return dispatch('handleErrors', 'we encountered some issues')
    }

    dispatch('anotherActionToHandleData', data.Address.createForCompany)
    
    console.log('Success!')
  } catch (error) {
    // Here, you can catch and handle any errors that occur
    dispatch('handleErrors', 'the call was unsuccessful')
  }
},

Alternatively, utilizing the onError callback is also a good option if you're comfortable configuring it: https://www.apollographql.com/docs/react/data/error-handling/

Answer 4

This type of smart query has its limitations, so I prefer to manage it within my Vuex store. While I'm not certain if this is the best practice, it's working well for me at the moment.

async performVuexAction({ dispatch }, { input }) {
  try {
    const { errors, data } = await this.app.apolloProvider.defaultClient.mutate({
      mutation: yourGraphqlMutationHere,
      errorPolicy: 'all',
      variables: {
        input: fancyInput,
      },
    })

    if (errors) {
      return dispatch('handleErrors', 'we encountered some issues')
    }

    dispatch('anotherActionToHandleData', data.Address.createForCompany)
    
    console.log('Success!')
  } catch (error) {
    // Here, you can catch and handle any errors that occur
    dispatch('handleErrors', 'the call was unsuccessful')
  }
},

Alternatively, utilizing the onError callback is also a good option if you're comfortable configuring it: https://www.apollographql.com/docs/react/data/error-handling/

Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

Answer №1

Answer №2

Similar questions

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

Node.js and react-create-app are not compatible with each other

Utilizing jQuery to send multiple values via an ajax request

After making changes to Vue, jQuery's data is now obsolete

Creating TypeScript declaration file for exporting JavaScript function

Dynamically load the configuration for a JQuery plugin

What is the best way to pass compile-time only global variables to my code?

Reveal and conceal using CSS animations

"Troubleshooting a bug: GetElementById function fails to find elements with hyphenated

What is the best way to activate a JavaScript function once a page has finished loading?

What is the best way to incorporate items into Redux reducers?

Steps for creating an AJAX request to a variable defined within the local scope

unable to toggle the navbar

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

The bodyparser in Express seems to be malfunctioning

Converting a JS string into HTML markup

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Guide to implementing client-side validation in MVC 4 without relying on the model

Every time I refresh the page, the user is automatically logged out