Reactを使っていてGraphQLのApollo ClientでQuery/Mutation時のtimeout設定について

基本公式で完結するので、そこまで悩みポイントはないが、ちょっと注意点があったので参考程度にまとめておく。

環境

• React v16.13.x
• Apollo Client v3.2.x
• apollo-link-timeout https://github.com/drcallaway/apollo-link-timeout

実装

10秒でタイムアウトさせたい場合

imoprt ApolloLinkTimout from 'apollo-link-timeout';

const timeoutValue = 10000; // 10秒

const timeoutLink = new ApolloLinkTimeout(10000);

const apolloClient = new ApolloClient({
  link: timoutLink.concat(
    createHttpLink({
      url: 'http://example.com'
    }),
  ),
});

注意点

timeoutをconcat引数に渡すと効かない

また、clientインスタンスを生成する時の処理を以下のようにするとtimeoutが効かないので注意
ハマリポイントではないが、どちらもconcatメソッドがあるので逆でやってみたら効かなかったのでメモに残しておくが、基本的には、ドキュメント通りにやれば問題ない。
https://github.com/drcallaway/apollo-link-timeout#usage

const apolloClient = new ApolloClient({
  link: createHttpLink({
    url: 'http://example.com'
  }).concat(timoutLink),
});

Subscriptionは効かない

ドキュメントに書かれている

An Apollo Link that aborts requests that aren't completed within a specified timeout period. Note that timeouts are enforced for query and mutation operations only (not subscriptions).

QueryとMutation処理にのみtimeoutが効く

この他、link周りで気になった点があれば、公式を読むと理解が深まる気がする。
https://www.apollographql.com/docs/link/