GraphQLキャッシングの使用-CSSチュートリアル-php.cn

GraphQLキャッシングの使用

GraphQLキャッシュメカニズム分析：キャッシュエラーの破損

「GraphQLはキャッシュをサポートしていない」や「GraphQLがキャッシュを気にしない」などのことを聞いたことがあるかもしれません。これは多くの人々にとって大きな問題です。しかし、そうではありません。 GraphQLの公式文書は、さまざまなキャッシュテクノロジーに言及しています。これは、その開発チームがキャッシュとそのパフォーマンスの利点を非常に重要にしていることを示しています。

この記事は、GraphQLとキャッシュの関係を明確にし、さまざまなキャッシュ技術とキャッシュを使用してGraphQLクエリを最適化する方法を導入することを目的としています。

GraphQL自動キャッシュメカニズム

投稿を取得するには、次のクエリを検討してください。

クエリgetpost {
  POST（SLUG： "Working-with-graphql-caching"）{
    id
    タイトル
    著者 {
      id
      名前
      アバター
    }
  }
}

ログイン後にコピー

GraphQL Automatic Cachingを実装する「秘密」は、すべてのGraphQL APIによって提供される__typenameメタフィールドです。名前が示すように、 __typenameオブジェクトのタイプ名を返します。このフィールドは、ほとんどのGraphQLクライアントまたはCDNがURQLなどの自動的に追加する既存のクエリに手動で追加することもできます。サーバーが受信したクエリは次のようになる場合があります。

クエリgetpost {
  POST（SLUG： "Working-with-graphql-caching"）{
    __typename
    id
    タイトル
    著者 {
      __typename
      id
      名前
    }
  }
}

ログイン後にコピー

__typenameを含む応答は次のようになるかもしれません：

 {
  データ： {
    __typename： "post"、
    ID：5、
    タイトル：「GraphQLキャッシングの操作」、
    著者： {
      __typename： "user"、
      ID：1、
      名前：「ジェイミー・バートン」
    }
  }
}

ログイン後にコピー

__typename 、結果をキャッシュし、投稿ID 5とユーザーID 1が含まれていることを知っているため、GraphQLキャッシュの鍵です。

ApolloやRelayなどのライブラリは、自動キャッシュ用の一定レベルの組み込みキャッシュも提供します。彼らはすでにキャッシュにあるものを知っているので、彼らはクライアントがクエリで要求するものを取得するために、リモートAPIの代わりにキャッシュを活用できます。

自動障害キャッシュ

投稿者がeditPostバリアントを使用して投稿のタイトルを変更しているとします。

突然変異{
  editpost（input：{id：5、title： "with graphql caching"}）{
    id
    タイトル
  }
}

ログイン後にコピー

GraphQLクライアントは__typenameフィールドを自動的に追加するため、このバリアントの結果は、ポストID 5が変更されたことと、POSTを含むキャッシュクエリの結果を無効化する必要があることをキャッシュにすぐに伝えます。

 {
  データ： {
    __typename： "post"、
    ID：5、
    タイトル：「GraphQLキャッシングの操作」
  }
}

ログイン後にコピー

次回ユーザーが同じクエリを送信するとき、クエリは、キャッシュで期限切れの結果を使用する代わりに、ソースから新しいデータを取得します。

GraphQLキャッシュを正規化します

多くのGraphQLクライアントは、クエリの結果全体をキャッシュしません。代わりに、キャッシュされたデータを2つのデータ構造に正規化します。1つは各オブジェクトをデータに関連付けます（例：投稿＃5：{…}、ユーザー＃1：{…}など）。

特定の例とユースケースについて、キャッシュまたはアポロの「デミスティデ化キャッシュ正規化」の正規化に関するURQLのドキュメントを参照してください。

GraphQLキャッシュエッジケース

GraphQLキャッシュが自動的に処理できない主なエッジケースの1つは、リストにアイテムを追加することです。したがって、 createPost変異がキャッシュを通過する場合、アイテムを追加する特定のリストがわかりません。

最も簡単な「回避策」は、突然変異の親タイプを照会することです（存在する場合）。たとえば、次のクエリでは、投稿のコミュニティ関係を照会します。

クエリgetpost {
  POST（SLUG： "Working-with-graphql-caching"）{
    id
    タイトル
    著者 {
      id
      名前
      アバター
    }

    ＃また、投稿のコミュニティを照会します
    コミュニティ {
      id
      名前
    }
  }
}

ログイン後にコピー

また、 createPostバリアントからコミュニティを照会し、コミュニティを含むキャッシュクエリの結果を無効にすることもできます。

 MutationCreatePost {
  createPost（入力：{...}）{
    id
    タイトル

    ＃またクエリをしているため、投稿のコミュニティを無効にします
    コミュニティ {
      id
      名前
    }
  }
}

ログイン後にコピー

完璧ではありませんが、タイプされたパターンと__typenameメタフィールドは、GraphQL APIをキャッシュに最適にするための鍵です。

これはすべてStopGapソリューションだと思うかもしれませんが、GraphQLはまだ従来のキャッシングをサポートしていません。あなたは間違っていることはありません。 GraphQLは投稿リクエストを介して実行されるため、アプリケーションクライアントにアンインストールし、上記の「トリック」を使用してGraphQLの最新のブラウザキャッシュを利用する必要があります。

ただし、このアプローチは常に可能であるとは限らず、クライアントのキャッシュを管理する最良の方法ではありません。より難しいケースの場合、GraphQLクライアントはキャッシュを手動で更新する必要がありますが、GraphCDNのようなサービスは「サーバーのような」キャッシングエクスペリエンスを提供し、より良いキャッシュコントロールのために以下を実行できる手動クリアリングAPIも提供します。

 ＃特定のオブジェクトのすべての発生をパージします
突然変異{
  purgeuser（id：[5]）
}

ログイン後にコピー

 ＃クエリ名でパージ
突然変異{
  _purgequery（queries：[listusers、listposts]）
}

ログイン後にコピー

 ＃タイプのすべての出現をパージします
突然変異{
  purgeuser
}

ログイン後にコピー

これで、GraphCDNエンドポイントをどこで使用しても、モバイル、Webなどのすべてのクライアントロジックでキャッシュポリシーを再現する必要はなくなりました。 Edgeキャッシュは、ユーザー間でキャッシュを共有し、各ユーザーのクライアントから分離することにより、APIを非常に高速にし、負荷を減らします。

私は最近、クライアントまたはサーバーのキャッシュ構成を処理するのに役立つプロジェクトでGraphCDNを使用し、プロジェクトを続けることができました。たとえば、エンドポイントをGraphCDNに置き換えて、クエリの複雑さ（近日公開）、分析などを無料で取得できます。

それで、GraphQLはキャッシングに関心がありますか？もちろんあなたは気にします！組み込みの自動キャッシュ方法を提供するだけでなく、多くのGraphQLライブラリがキャッシュを実装および管理する他の方法を提供します。

うまくいけば、この記事がGraphQLキャッシングメカニズム、クライアント側にそれを実装する方法と、すべての作業を行うためにCDNを活用する方法を理解するのに役立つことを願っています。私の目標は、すべてのプロジェクトでGraphQLを使用するよう説得することではありませんが、クエリ言語を選択してキャッシュが重要な要素である場合、GraphQLはこのタスクに対して完全に有能であることを知ってください。

以上がGraphQLキャッシングの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。