Apollo-link: Détecter les erreurs à l'aide de liens

Créé le 2 nov. 2017 · 5Commentaires · Source: apollographql/apollo-link

L'utilisation de cet exemple de la documentation entraîne l'appel de fetch 2 fois (le premier sur l'abonnement et le second dans le lien http) :

http://apollo-link-docs.netlify.com/docs/link/stateless.html

const reportErrors = (errorCallback) => new ApolloLink((operation, forward) => {
  const observer = forward(operation);
  // errors will be sent to the errorCallback
  observer.subscribe({ error: errorCallback })
  return observer;
});

//...

const createLinks = () =>
  ApolloLink.from([
    reportErrors(console.error),
    httpLink,
  ]);

Il fonctionne comme prévu selon la spécification observable. Le producteur fn doit être appelé lors du premier appel d'abonnement. Mais on ne sait pas quelle est la bonne façon de gérer les erreurs en combinaison avec httpLink ?

J'ai creusé un peu dans le code source et il y a des méthodes comme map , reduce etc mais aucune d'entre elles n'accepte un rappel d'erreur.

Source

valerybugakov

Commentaire le plus utile

@valerybugakov jetez un œil à apollo-error-link

Composez ceci avec votre httpLink comme ceci :

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory';

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

const httpLink = createHttpLink({ ... });

const link = ApolloLink.from([
  ...otherLinksIfNeeded,
  errorLink,
  httpLink,
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  queryDeduplication: true,
});

ghost le 3 nov. 2017

👍30 🎉12 ❤1

Tous les 5 commentaires

@valerybugakov jetez un œil à apollo-error-link

Composez ceci avec votre httpLink comme ceci :

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory';

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

const httpLink = createHttpLink({ ... });

const link = ApolloLink.from([
  ...otherLinksIfNeeded,
  errorLink,
  httpLink,
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  queryDeduplication: true,
});

ghost le 3 nov. 2017

👍30 🎉12 ❤1

@somehandle oui , c'est une option. Que faire si je veux gérer les erreurs dans mon lien personnalisé ? J'ai trouvé que la seule façon de le faire est d'envelopper Observable retourné par next(operation) dans un autre Observable.

valerybugakov le 3 nov. 2017

@valerybugakov quel type d'erreurs voulez-vous gérer ? S'il s'agit d'erreurs Graphql, vous pouvez utiliser .map sur le résultat de forward(operation) car elles sont renvoyées en conséquence, sinon, vous devez vous inscrire autour de l'autre observateur. Jetez un œil au code derrière apollo-link-error pour quelques exemples !