---
title: "GraphQLを使ってJSS Next.jsアプリでコンポーネントレベルのデータを取得してください"
slug: "use-graphql-to-fetch-component-level-data-in-jss-next-js-apps"
abstract: "コンポーネントを含むデータを取得するために、2つの異なるGraphQL手法(連結型または統合型)を使う方法。"
---
# GraphQLを使ってJSS Next.jsアプリでコンポーネントレベルのデータを取得してください

Next.jsサンプルアプリは、GraphQLで [コンポーネントレベルのデータ取得](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html "Component-level data fetching in JSS Next.js apps") に2つの方法をサポートしています:

-   [Connected GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html#UUID-26ae6175-2c4b-c24f-5cf5-83ea40780a45_section-idm234604415675995 "Component-level data fetching with connected GraphQL")は、コンポーネントコードからGraphQLエンドポイントをクエリすることを可能にします。 [コード優先の開発者ワークフロー](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")に従い、 [これは接続モード](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/start-a-jss-app-in-connected-mode.html "Start a JSS app in connected mode")でのみ可能です。
-   [統合GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html#UUID-26ae6175-2c4b-c24f-5cf5-83ea40780a45_section-idm1853460441488278 "Component-level data fetching with integrated GraphQL") (IGQL)は、Sitecore内のレンダリング項目にクエリを追加します。

> !注コンポーネントレベルのgetStaticPropsやgetServerSideProps関数に秘密情報や機密情報を含めると、その情報は開発モードでクライアントサイドのバンドルにのみ含まれます。

## 接続されたGraphQLによるコンポーネントレベルのデータフェッチ

コード内では、Sitecore GraphQL Edgeエンドポイントで定義されたGraphQL型に強い型を結びつけるのが良い慣例です。アプリケーションはライブラリgraphql-letと[GraphQL内省データ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/introspecting-the-graphql-schema-in-jss-next-js-apps.html "Introspecting the GraphQL schema in JSS Next.js apps") を使ってこれを実現します。

サンプルアプリはスキーマの探索やクエリのテストを行うためのGraphiQLインターフェースを提供しています。デフォルトでは、インターフェースには ${SITECORE\_API\_HOST}/sitecore/api/graph/edge/ui?sc\_apikey=${SITECORE\_API\_KEY}を使ってアクセスできます。このインターフェースは、コンポーネントで使用できるGraphQL型を決めたい場合に役立ちます。

> !注graphql-letライブラリは対応する .graphq.d.tsファイル内の型に関する情報も同様に提供しています。

接続されたGraphQLでコンポーネントレベルのデータ取得を使用するには:

1.  GraphQL-ConnectedDemo.graphqlファイルでは、*Connected Demo*クエリの例に従ってGraphQLクエリを定義します。
    
    ライブラリgraphql-letはファイルGraphQL-ConnectedDemoQuery.graphql.d.tsを生成します。
    
2.  コンポーネントファイルに、次のインポート文を追加してください:
    
    import {
     constants,
     GetServerSideComponentProps,
     GetStaticComponentProps,
     useComponentProps,
    } from '@sitecore-jss/sitecore-jss-nextjs';
    import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';
    
3.  必要に応じて、最新のGraphQL型にアクセスできるように [内省データを更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/introspecting-the-graphql-schema-in-jss-next-js-apps.html#UUID-f97fca1b-aa36-845e-8191-a6c9e8b81963_section-idm452594043420323242848070384 "Update introspection data") してください。
    
4.  GraphQLクエリをインポートする:
    
    import {
     ConnectedDemoQueryDocument,
     AppRoute,
     Item,
     GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,} from './ConnectedDemoQuery.graphql';
    
5.  コンポーネント内でgetStaticPropsまたはgetServerSideProps関数を定義します。この例ではgetStaticPropsを実装しています。GraphQLは切断モードで動作しないため、アプリが切断モードで動作する場合は関数を終了しなければなりません。また、lib/graphql-client-factoryのgraphqlClientFactoryプロパティを使って新しいGraphQLクライアントを作成する必要があります。例えば:
    
    import graphqlClientFactory from 'lib/graphql-client-factory';
    ...
    export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
     if (process.env.JSS\_MODE === constants.JSS\_MODE.DISCONNECTED) {
     return null;
     }
     const graphQLClient = graphqlClientFactory();
    }
    
6.  リクエストを実行し、結果を返します:
    
    import graphqlClientFactory from 'lib/graphql-client-factory';
    ...
    export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
     if (process.env.JSS\_MODE === constants.JSS\_MODE.DISCONNECTED) {
     return null;
     }
     const graphQLClient = graphqlClientFactory();
     const result = await graphQLClient.request<GraphQLConnectedDemoData>(MyQuery, {
     datasource: rendering.dataSource,
     contextItem: layoutData?.sitecore?.route?.itemId,
     language: layoutData?.sitecore?.context?.language,
     });
     return result;
    };
    
7.  コンポーネント関数では、useComponentPropsフックを使って得られたデータにアクセスできます:
    
    const GraphQLConnectedDemo = (props: StyleguideComponentProps): JSX.Element => {
     const data = useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid);
     // implement your component
    }
    
8.  編集モードでコンテンツを表示する戦略を実装してください。Sitecoreコンテキストを使って静的データをレンダリングできます。あるいは、編集モードでデータベースデータをmaster見るには、Content ManagementインスタンスのエンドポイントURLでGraphQLクライアントをインスタンス化してください。
    
    > !注このステップを省略すると、アプリケーションはサイト訪問者に対して同じデータを表示します。なぜなら、Content Delivery URLエンドポイントがmasterデータベースではなくwebから提供されるためです。
    
    -   コンポーネントでプレースホルダーマークアップをレンダリングするには:
        
        import { useSitecoreContext} from '@sitecore-jss/sitecore-jss-nextjs';
        
        const MyComponent = () => {
         const { sitecoreContext } = useSitecoreContext();
         // define some stub data
         if (sitecoreContext.pageEditing) {
         return (
         <div>
         This would usually render dynamic GraphQL data. This stub is used only for editing mode.
         </div>
         );
         }
         // ... rest of the component
        }
        
    -   データ取得に別のエンドポイントを使う場合は、コンポーネントがプレビュー/編集モードかどうかを確認し、それに応じてURLを切り替えます。この例では、GraphQL編集URLを環境変数EDITING\_GQL\_ENDPOINTに割り当てたと仮定しています。
        
        export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData, context) => {
        
         if (process.env.JSS\_MODE === constants.JSS\_MODE.DISCONNECTED) {
         return null;
         }
        
          const {preview} = context;
          const graphQLEndpoint = preview ? process.env.EDITING\_GQL\_ENDPOINT : config.graphQLEndpoint;
        
         // if using getServerSideProps, you can use the Sitecore context from the layoutData
         // const graphQLEndpoint = layoutData.sitecore.context.pageEditing ? process.env.EDITING\_GQL\_ENDPOINT : config.graphQLEndpoint;
        
         const graphQLClient = new GraphQLRequestClient(graphQLEndpoint, {
            apiKey: config.sitecoreApiKey,
          });
        
         const result = await graphQLClient.request<GraphQLConnectedDemoData>(MyQuery, {
         datasource: rendering.dataSource,
         contextItem: layoutData?.sitecore?.route?.itemId,
         language: layoutData?.sitecore?.context?.language,
         });
        
          return result;
        };
        
        > !注sitecoreApiKeyはエンドポイントごとに異なることがあるので、スイッチングはエンドポイントを切り替えるのと同じロジックで行うようにしてください。
        

アプリケーションを正しく設定しているか確認するために、[Sitecoreサンプルアプリに含まれる接続されたGraphQLコンポーネント](https://github.com/Sitecore/jss/blob/release/21.0.0/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx)と比較してください。

コンポーネントでGraphQLクエリを使うより複雑な例として、nextjs-styleguideアドオンテンプレートのコンポーネントを参照してください。 /src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsxで定義されています。

## 統合GraphQLによるコンポーネントレベルのデータ取得

[統合GraphQL(IGQL)は](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/integrated-graphql-in-jss-apps.html "Integrated GraphQL in JSS apps") 、Experience Edgeレイアウト応答によって特定のコンポーネントに対して返されるレイアウトデータ形状に直接影響します。

GraphQLクエリは、レイアウトサービスが返すデータの形状を描くレンダリングアイテム上で定義でき、標準的なレスポンスと同様にprops.fieldsオブジェクトから利用できます。これにより、返されるデータの形状をより細かく制御できます。

IGQLをコンポーネントに追加するには、そのコンポーネントのレンダリングアイテムのComponent GraphQL Queryフィールドにクエリを入力します。

![The Component GraphQL Query field, containing an integrated GraphQL query.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/21/sitecore-headless-development/images/integrated-component-graphql-query.png)

> !ヒント必要に応じて、[Sitecoreサンプルアプリの統合GraphQLコンポーネント](https://github.com/Sitecore/jss/blob/release/21.0.0/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-IntegratedDemo.tsx) をご参照ください。