--- title: "JSSアプリでGraphQLを使用する際のベストプラクティスと推奨事項" slug: "best-practices-and-recommendations-for-using-graphql-in-jss-apps" abstract: "フロントエンドアプリでGraphQLを使う際のヒントとベストプラクティス" --- # JSSアプリでGraphQLを使用する際のベストプラクティスと推奨事項 [Sitecore GraphQL API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-graphql-api.html "Sitecore GraphQL API")エンドポイントを使用する際は、[一般的なベストプラクティス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-graphql-best-practices.html "Sitecore GraphQL best practices")に従うことをお勧めします。 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](https://github.com/apollographql/eslint-plugin-graphql)はビルド時にクエリを検証し、graphql-toolsは切り離されたモックGraphQL APIを作成し、[ts-graphql-plugin](https://github.com/Quramy/ts-graphql-plugin)はTypeScriptでGraphQLのコード補完を提供します)は、正しく実行するためにGraphQLスキーマのコピーが必要です。場合によっては、Sitecoreインスタンスから直接ダウンロードしてライブスキーマを得ることもできます。ただし、他の場合にはライブのSitecoreインスタンスが存在しないため、スキーマの静的コピーが必要です。 スキーマ入力には主に2つのタイプがあります。 - JSONフォーマットのスキーマです。これは、GraphQL APIに対する内省クエリの結果です。例えば、GraphiQLがブラウザ上でドキュメントを提供するためにこれを使っています。 - スキーマ定義言語スキーマです。これは読みやすい形式でスキーマを定義するテキスト形式です。 $endpointUrl/schema にアクセスして内容を取得し、 .graphql ファイルとして保存することでダウンロードできます。 Sitecoreの設定変更(テンプレートの変更や追加など)がGraphQLスキーマを変更すると、静的スキーマファイルを使用する場合は、誤った検証を防ぐために常に最新の状態を維持する必要があります。