Shopify GraphQLのキャッシュ化：実践ガイド

GraphQLはRESTとは仕組みが異なります。URL単位でのキャッシュはできません。RESTでは、1つのエンドポイントが1つのキャッシュエントリに対応します。一方、GraphQLでは1つのエンドポイントですべてを処理します。同じURLへの2つのリクエストであっても、返されるデータは異なる場合があります。

GraphQLを正しくキャッシュするには、キャッシュキーに以下を含める必要があります：

  • クエリ
  • 変数
  • ユーザーコンテキスト（ロケールまたはバイヤーセグメント）

高速なシステムを構築するために、レイヤーを活用しましょう：

  • クライアントキャッシュ：ブラウザでのセッション再利用用。
  • エッジキャッシュ：公開されているストアフロントページ用。
  • アプリキャッシュ：サーバー上の共有データ用。
  • Persisted queries：安定したハッシュベースのキー用。

キャッシュの保持時間は、データの更新頻度に合わせて設定してください。

以下の項目は、長期間キャッシュしてください：

  • 商品詳細
  • コレクション
  • ショップ設定

以下の項目は、短期間キャッシュしてください：

  • 価格
  • 在庫状況

以下の項目は、絶対にキャッシュしないでください：

  • カート
  • チェックアウトプロセス
  • 顧客固有の価格

B2Bストアを対象とする場合は、キャッシュキーに会社IDを含める必要があります。これを行わないと、顧客Aが顧客Bの契約価格を見てしまう可能性があります。

データの鮮度を管理するために、以下の3つの手法を使用します：

  1. TTL (Time-based): 有効期限を設定します。シンプルですが、多くの場合、推測に基づいた設定になります。
  2. Webhooks (Event-based): これが最も正確です。商品が更新されると、ShopifyがWebhookを送信します。そのWebhookを使用して、古いキャッシュエントリを削除します。
  3. Stale-while-revalidate: バックグラウンドでキャッシュを更新している間に、古いデータを即座に提供します。

信頼性の高いWebhookハンドラーを構築してください。Webhookが失敗すると、キャッシュが古いままになってしまいます。これを防ぐためにリトライ処理を導入しましょう。

戦略が機能しているかを確認するために、以下のメトリクスに注目してください：

  • ヒット率: 高いヒット率を目指します。
  • レイテンシ: レスポンスタイムが低下することを確認します。
  • 回避されたAPIコール数: ヒット率が高ければ、コストを抑えられます。
  • データの不整合 (Stale incidents): 誤った価格や在庫情報の表示をゼロにすることが目標です。

キャッシュを階層化しましょう。有効期限はデータの変動性に合わせて設定します。古いデータをクリアするにはWebhookを使用します。パーソナライゼーションを考慮したキーを構築してください。

出典: https://dev.to/masadashraf/caching-shopify-graphql-a-practical-guide-for-developers-33k8