Apollo-link: Captura de erros usando links

Criado em 2 nov. 2017 · 5Comentários · Fonte: apollographql/apollo-link

Usando este exemplo dos resultados da documentação para chamar fetch 2 vezes (a primeira na assinatura e a segunda no link 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 conforme pretendido de acordo com as especificações observáveis. O produtor fn deve ser chamado na primeira chamada de assinatura. Mas não está claro qual é a maneira certa de lidar com erros em combinação com httpLink ?

Eu pesquisei um pouco no código-fonte e existem métodos como map , reduce etc, mas nenhum deles aceita um retorno de chamada de erro.

Fonte

valerybugakov

Comentários muito úteis

@valerybugakov dê uma olhada em apollo-error-link

Componha isso com seu httpLink assim:

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

👍30 🎉12 ❤1

Todos 5 comentários

@valerybugakov dê uma olhada em apollo-error-link

Componha isso com seu httpLink assim:

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

👍30 🎉12 ❤1

@somehandle sim, é uma opção. E se eu quiser lidar com erros em meu link personalizado? Descobri que a única maneira de fazer isso é envolver o Observable retornado por next(operation) em outro Observable.

valerybugakov em 3 nov. 2017

@valerybugakov que tipo de erros você deseja tratar? Se forem erros Graphql, você pode usar .map no resultado de forward(operation) pois eles são retornados como resultado, caso contrário, você precisa se inscrever em torno do outro observador. Dê uma olhada no código por trás de apollo-link-error para alguns exemplos!