JSSアプリでGraphQLを使用するためのベストプラクティスと推奨事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore GraphQL APIエンドポイントを使用する場合は、一般的なベスト プラクティスに従うことをお勧めします。
フロントエンドからGraphQL APIを使用する場合は、次のことをお勧めします。
-
クエリを .graphqlファイルに分割します。それらをコードと混同しないでください。
-
これにより、懸念事項が適切に分離され、次のようなツールを使用するとgraphql-tag/loader、JavaScriptファイルと同じ方法でファイルをインポートできます。
-
静的に分析可能なクエリを使用すると、ビルド時にすべてのクエリを検証したり、セキュリティ ホワイトリストを実行したり、その他の一般的な操作を実行したりすることが容易になります。
-
これが不可能な場合 (たとえば、現在Angularでは、ビルドをカスタマイズしてGraphQLローダーを追加することはできません)、クエリを .jsファイルまたはAngularコンポーネントのmycomponent.graphql.tsなど、クエリのみを含む.tsファイルに分割します。
-
-
動的な文字列連結クエリ (クエリ テキストにGraphQL以外の変数を使用) は使用しないでください。クエリ変数は、常にGraphQLクエリ変数である必要があります。
-
これは、ホワイトリスト、静的分析、パフォーマンス分析を打ち負かし、一般的には悪い考えです。
-
-
クエリのバッチ処理を利用します。
-
RESTに対するGraphQLの主な利点の1つは、GraphQLがプロトコルであるため、RESTではできないことの一部を実行できることです。
-
クエリのバッチ処理により、複数のクエリ (短時間内に行われた) を1つのHTTP要求に自動的に結合できます。
-
-
ツールを使用して、GraphQLクエリがGraphQLスキーマに対して有効であることを確認します ( eslint-plugin-graphqlなど)。
-
これにより、ビルド時の安全性が確保され、クエリ式が有効であり、実行時に中断されません。
-
Sitecore GraphQLとGraphQLツールを併用する
Sitecore GraphQLとGraphQLツールを併用する
多くの種類のGraphQLツール (ビルド時にクエリを検証するeslint-plugin-graphql 、切断されたモックGraphQL APIを作成するgraphql-tools 、TypeScriptでGraphQLのコード補完を提供するts-graphql-pluginなど) は、正しく実行するにはGraphQLスキーマのコピーが必要です。場合によっては、これをSitecoreインスタンスから直接ダウンロードして、ライブ スキーマを持つことができます。ただし、それ以外の場合はライブSitecoreインスタンスがないため、スキーマの静的コピーが必要です。
スキーマ入力には、主に2つのタイプがあります。
-
JSON形式のスキーマ。これは、GraphQL APIに対するイントロスペクションクエリの結果です。これは、GraphiQLがブラウザにドキュメントを提供するなどに使用するものです。
-
スキーマ定義言語スキーマ。これは、スキーマを読み取り可能な形式で定義するテキスト形式です。これをダウンロードするには、$endpointUrl/schemaにアクセスしてコンテンツを取得し、.graphqlファイルとして保存します。
Sitecore設定の変更 (テンプレートの変更や追加など) により、GraphQLスキーマが変更されます。静的スキーマファイルを使用する場合は、誤った検証を避けるために、常に最新の状態に保たれるようにする必要があります。