JSS Next.jsアプリにおけるGraphQLスキーマの内省

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

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

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

これらのデータ型はサーバー側で実装されているため、フロントエンド開発者は効率的なクエリを書くためにスキーマを理解するのに役立つツールを使用しなければなりません。これらのツールはGraphQLの内省システム を使用し、内省データを提供します。内省データはクエリ可能なすべてのタイプを記述します。

SitecoreAIインスタンスはスキーマ探索やクエリテストのためのインターフェースを提供します ${SITECORE_API_HOST}/sitecore/api/graph/edge/ui?sc_apikey=${SITECORE_API_KEY}。内省データにはインターフェースのDocsタブでアクセスできます。

IDEの豊富な支援を持つ型保護コードを書くためには、フロントエンド開発者がフロントエンドアプリケーションで利用可能なGraphQL強力な型が必要です。

JSS Next.jsアプリケーションはgraphql-letパッケージを用いて、GraphQLスキーマからの内省データに基づいてTypeScript型付けを生成します。内視データはファイルsrc/temp/GraphQLIntrospectionResult.json に位置しています。

内省データの更新

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

データの更新:

  • Next.jsアプリケーションのルートディレクトリで、以下を実行します:

    jss graphql

これはスクリプトscripts/fetch-graphql-introspection-data.tsを呼び出し、定義したGraphQLエンドポイントから新しい内省データを取得し、ファイルを更新します。

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

この記事を改善するための提案がある場合は、 お知らせください!