はじめに

こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、KDDI Engineer&Designer Advent Calendar 2021の20日目の記事です。

今回は、ContentfulというHeadlessCMSを利用した際に起こるTechnical Limit(API call数制限 429Too Many Requests)をApollo clientで回避する方法についてまとめていきたいと思います。

なぜこんな記事を書いたのか

現在、Next.jsとContentfulを利用したポータルサイトの開発を行なっているのですが、その中でContentfulにおけるTechnical Limitの制限により問題が発生した為、今回その原因と解決方法について記事にしてみました。

ContentfulにおけるTechnical Limit

ContentfulにおけるTechnical Limitは、ここに記載があるのですが、今回ボトルネックになったのは、「Content Delivery API (CDA) calls (includes GraphQL calls)」の秒間55requestという制限になります。
これは、秒間に55request以上の負荷がcontentful側にかかった場合に、HTTPステータスが429で返却されてしまうというものです。

• 現在開発しているポータルサイトでは、contentfulのエンドポイントで提供しているGraphQLを利用しています。
• また、ポータル自体はNext.jsを利用し全ページSSG構成をとっています。

この時、何が発生するのかというと静的ページの生成時に、下記のようなコードで非同期に画面生成に必要なデータをbuildする際にContentfulのエンドポイントに対しRequestします。
そうすると、各画面に必要なデータをNext.jsは非同期にfetchしにいくので、ページ数が多ければ多いほど、このContentfulにおけるTechnical Limitである、秒間のRequestに達する可能性が高くなるのです。

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

解決策

• 色々この問題を解決する方法を検討した中で、一番簡単に対処できた方法というのが、GraphQLのクライアント向けライブラリであるApollo clientのoption機能を利用した方法です。

• Apollo clientには、Retry Linkという機能がoptionで設定することができます。

これが何かというと、ネットワークまたはサーバーのエラーが原因でRequest操作が失敗した場合に、Request操作を複数回リトライすることができるという機能です。
Apollo ClientはデフォルトではRequest操作のリトライを行いません。
なので、ReqponseでHTTPステータスが429のToo Many Requestsが返却された場合には、エラーで落ちてしまいます。

• @apollo/client/link/retryのRetryLinkを使用することで、Request操作のリトライを行うことができます。

import { RetryLink } from "@apollo/client/link/retry";

const link = new RetryLink();

このRetryLinkではさらに細かいリトライ処理の条件を指定することができます。
今回は、delay.initialというoptionとdelay.maxというオプションを利用し、秒間55requestに達しないように調整しました。

まとめ

今回ポータルサイトの開発にSaaSであるHeadless CMSのcontentfulを利用させていただいたのですが、SaaSを利用する際のデメリットとして、このようなTechnical Limitの制約で詰まることがあるのがネックだなと感じました。