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