Apollo-link: Detectar errores mediante enlaces

Creado en 2 nov. 2017 · 5Comentarios · Fuente: apollographql/apollo-link

El uso de este ejemplo de la documentación da como resultado una llamada a fetch 2 veces (la primera en suscribirse y la segunda en el enlace 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,
  ]);

Funciona según lo previsto de acuerdo con la especificación observable. Se debe llamar al productor fn en la primera llamada de suscripción. Pero no está claro cuál es la forma correcta de manejar los errores en combinación con httpLink .

He profundizado un poco en el código fuente y hay métodos como map , reduce etc. pero ninguno de ellos acepta una devolución de llamada de error.

Fuente

valerybugakov

Comentario más útil

@valerybugakov echa un vistazo a apollo-error-link

Componga esto con su httpLink así:

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 en 3 nov. 2017

👍30 🎉12 ❤1

Todos 5 comentarios

@valerybugakov echa un vistazo a apollo-error-link

Componga esto con su httpLink así:

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 en 3 nov. 2017

👍30 🎉12 ❤1

@somehandle sí, es una opción. ¿Qué pasa si quiero manejar errores en mi enlace personalizado? Encontré que la única forma de hacerlo es envolver el Observable devuelto por next(operation) en otro Observable.

valerybugakov en 3 nov. 2017

@valerybugakov ¿qué tipo de errores quieres manejar? Si son errores de Graphql, puede usar .map en el resultado de forward(operation) ya que se devuelven como resultado; de lo contrario, debe suscribirse al otro observador. ¡Eche un vistazo al código detrás de apollo-link-error para ver algunos ejemplos!