JSS Next.jsアプリでのGraphQLスキーマのイントロスペクション

Version: 22.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

GraphQLは厳密に型指定されています。GraphQLスキーマは、エンドポイントから使用可能なデータ型 (クエリ、ミューテーション、ディレクティブ) を定義します。

これらのデータ型はサーバー側で実装されるため、フロントエンド開発者は、効率的なクエリを記述するためにスキーマを理解するのに役立つツールを使用する必要があります。このようなツールは、GraphQLイントロスペクションシステム を使用し、イントロスペクションデータを提供します。イントロスペクション・データには、クエリーに使用できるすべてのタイプが記述されています。

Sitecoreインスタンスは、スキーマを探索し、${:placeholder-token:}{SITECORE_API_HOST}{/:placeholder-token:}/sitecore/api/graph/edge/ui?sc_apikey=${:placeholder-token:}{SITECORE_API_KEY}{/:placeholder-token:}でクエリをテストするためのインターフェイスを提供します。イントロスペクション・データには、インターフェースの「Docs」タブでアクセスできます。

豊富なIDEアシストを使用して型保護コードを記述するには、フロントエンド アプリケーションで使用できるGraphQLの強力な型が必要です。

JSS Next.jsアプリケーションは、graphql-letパッケージを使用して、GraphQLスキーマからのイントロスペクションデータに基づいてTypeScriptタイピングを生成します。イントロスペクション・データは、src/temp/GraphQLIntrospectionResult.json ファイルにあります。

イントロスペクション データの更新

サイトに関連するアイテムテンプレートを変更すると、ローカルに保存されたイントロスペクションデータは、Sitecoreインスタンスの情報と同期しなくなります。

データを更新するには:

  • Next.jsアプリケーションのルート ディレクトリで、次のコマンドを実行します。

    RequestResponse
    jss graphql:update

これにより、スクリプトscripts/fetch-graphql-introspection-data.tsが呼び出され、定義されたGraphQLエンドポイントから新しいイントロスペクション・データがフェッチされ、ファイルが更新されます。

このスクリプトでは、サンプルアプリを初めて起動したときに生成されるファイルであるsrc/temp/config.jsで定義されているgraphQLEndpoint値とsitecoreApiKey値を使用します。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、