Comment gérer l'erreur de requête Apollo Graphql dans Vue.JS ?

Question

J'utilise Vue.js avec Vue-Apollo et j'essaie de récupérer la liste des membres partagés en utilisant une requête. J'utilise le service graphQL en backend.

J'utilise la fonction 'error' d'Apollo pour gérer les erreurs GraphQL. Lorsque la requête est faite avec une entrée invalide, je peux voir les erreurs dans l'onglet réseau, je peux voir le JSON pour les messages d'erreurs personnalisés. Mais je ne peux pas consoler les erreurs dans la fonction 'error'.

Voici la requête Apollo qui est utilisée pour récupérer la liste des membres partagés.

apollo: {
    sharedMembers: {
      query: gql`
        query item($uuid: ID) {
          item(uuid: $uuid) {
            ...itemTemplate
            members {
              ...member
              permission
            }
          }
        }
        ${ITEM_TEMPLATE}
        ${MEMBER}
      `,
      variables() {
        return {
          uuid: this.$route.params.uuid,
        }
      },
      update(data) {
        return data.item.members
      },
      error(error) {
       console.log('errors', error)
      }
    },
  },

La réponse du réseau que j'ai reçue -

erreur de réseau

Answer 1

Utilisation de graphQLErrors

Vous pouvez obtenir les erreurs en recherchant graphQLErrors dans l'objet d'erreur :

error(error) {
  console.log('errors', error.graphQLErrors)
}

ou

error({ graphQlErrors }) {
  console.log('errors', graphQLErrors)
}

Utilisation de apollo-error-link

Vous pouvez utiliser apollo-error-link pour vous aider à résoudre votre problème si ce qui précède ne fonctionne pas, documents ici .

Voici un exemple tiré de la documentation et que j'ai ajouté dans la section networkErrors pour montrer ce que vous pouvez faire pour modifier le message d'erreur que vous voyez dans votre bloc d'erreur, ou dans le bloc catch s'il s'agit d'une mutation.

import { onError } from "apollo-link-error";

const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) {
    // Add something like this to set the error message to the one from the server response
    networkError.message = networkError.result.errors[0].debugMessage

    console.log(`[Network error]: ${networkError}`)
  };
});

Et ensuite dans votre code :

error(error) {
  console.log('error-message', error.message)
}

La console devrait alors enregistrer votre debugMessage du serveur.

Answer 2

Malheureusement, je n'ai pas pu trouver comment gérer les erreurs dans un tel appel de méthode graphql, mais comme option vous pourriez fournir onError pour ApolloClient options du constructeur. le premier argument est l'objet d'erreur. en espérant que cela puisse aider. ainsi

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000',
  onError(err) {
    console.log(err)
  },
})