Nuxt и Vue Apollo. Как да обработваме грешки в Smart Query с пренасочване към страница за грешка 404/400/500? Можем ли да хванем такива грешки?

С обикновена HTTP заявка може да създадем пренасочване с asyncData({error}){...}

Какво трябва да използваме за пренасочване към страница 400 с помощта на Smart Query?

С Vue Apollo се опитвам да използвам

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

В случай, че презаредим страницата, пренасочването не работи. Все още получаваме грешка, тъй като изобразяването от страна на сървъра:

въведете описание на изображението тук

С глобален манипулатор на грешки като:

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

Работи само регистриране на грешки. Пренасочването изобщо не работи.

Имаме ли някакъв начин да обработваме грешки в интелигентни заявки с пренасочване към страница 400 например?

Можем ли да хванем такива грешки в интелигентната заявка? Като try...catch... в asyncData(), за да предотвратите срив на приложението.


javascript vue.js nuxt.js apollo-client vue-apollo
person Skif    schedule 12.02.2021    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Намерих решението тук!

export default function ({ redirect }) {
  const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message }) => {
      if (`${message}` === 'Unauthenticated.') {
        redirect('/login')
        // Do Something
        localStorage.setItem('logged', false)
      }
    })
  }
  if (networkError) {
    console.log(`[Network error]: ${networkError}`)
  }
})
  return {
    defaultHttpLink: false,
    link: ApolloLink.from([link, 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()
  }
}`

Надяваме се, че този отговор е полезен за вас!
Наздраве!

person James Lin    schedule 22.02.2021

arrow_upward
0
arrow_downward

Интелигентната заявка като тази е доста ограничена и затова предпочитам да я обработвам в моя магазин Vuex. Не съм сигурен дали това е най-добрата практика, но в момента работи чудесно за мен.

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

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

    dispatch('anotherNiceFancyVuexAction', data.Address.createForCompany)
    
    console.log('success !')
  } catch (error) {
    // here, you could catch the error and maybe make a redirect
    dispatch('handleErrors', 'the call was not successfull')
  }
},

В противен случай, да, използването на връзката onError също е добра идея, ако смятате, че я конфигурирате: https://www.apollographql.com/docs/react/data/error-handling/

person kissu    schedule 16.02.2021
comment
Благодаря за отговора. Как се справяте със състоянието на зареждане? С интелигентна заявка можем да използваме this.$apollo.loading, за да покажем spinner. Какво да използваме в случай на вашия подход? - person Skif; 22.02.2021
comment
Благодаря за наградата! В този случай аз извиквам действието си vuex в куката fetch() nuxt и използвам $fetchState.pending помощник: nuxtjs.org/docs/2.x/components-glossary/pages-fetch Но може би има и променлива loading, която може да бъде деструктурирана от извикването на graphql, не съм проверил тази. - person kissu; 22.02.2021