Apollo-link: リンクを使用してエラーをキャッチする

作成日 2017年11月02日 · 5コメント · ソース: apollographql/apollo-link

ドキュメントのこの例を使用すると、fetchが2回呼び出されます（最初の例はサブスクライブで、2番目の例は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,
  ]);

観察可能な仕様に従って、意図したとおりに機能します。プロデューサーfnは、最初のサブスクライブ呼び出しで呼び出される必要があります。しかし、 httpLinkと組み合わせてエラーを処理する正しい方法が何であるかは明確ではありませんか？

ソースコードを少し掘り下げて、 map 、 reduceなどのメソッドがありますが、エラーコールバックを受け入れるメソッドはありません。

ソース

valerybugakov

最も参考になるコメント

@valerybugakovはapollo-error-linkを見て

次のようにhttpLinkでこれを作成します。

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 2017年11月03日

👍30 🎉12 ❤1

全てのコメント5件

@valerybugakovはapollo-error-linkを見て

次のようにhttpLinkでこれを作成します。

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 2017年11月03日

👍30 🎉12 ❤1

@somehandleうん、それはオプションです。カスタムリンクのエラーを処理したい場合はどうすればよいですか？それを行う唯一の方法は、 next(operation)によって返されたObservableを別のObservableにラップすることです。

valerybugakov 2017年11月03日

@valerybugakovどのようなエラーを処理しますか？それらがGraphqlエラーである場合、結果として返されるため、 forward(operation)の結果に.mapを使用できます。そうでない場合は、他のオブザーバーをサブスクライブする必要があります。いくつかの例については、apollo-link-errorの背後にあるコードを見てください！

jbaxleyiii 2017年11月29日

@jbaxleyiii
ネットワークエラーをキャッチしたい場合はどうなりますか？
400、悪いリクエストをしましょう。

coyolero 2018年01月12日

👍42

vjpr 2018年07月21日

このページは役に立ちましたか？

0 / 5 - 0 評価

Apollo-link: リンクを使用してエラーをキャッチする

最も参考になるコメント

全てのコメント5件

関連する問題