---
title: "JSS Next.jsアプリにおけるGraphQLスキーマの内省"
slug: "introspecting-the-graphql-schema-in-jss-next-js-apps"
abstract: "JSS Next.jsアプリケーションにおけるGraphQLスキーマの理解と利用"
---
# JSS Next.jsアプリにおけるGraphQLスキーマの内省

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

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

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

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

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

## 内省データの更新

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

データの更新:

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

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

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