---
title: "GraphQLを使ってJSS Next.jsアプリでコンポーネントレベルのデータを取得してください"
slug: "use-graphql-to-fetch-component-level-data-in-jss-next-js-apps"
abstract: "コンポーネント内でGraphQLを使ったデータ取得の例"
---
# GraphQLを使ってJSS Next.jsアプリでコンポーネントレベルのデータを取得してください

Next.jsのサンプルアプリは [コンポーネントレベルのデータ取得](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html "Component-level data fetching in JSS Next.js apps")をサポートし、コンポーネントレベルでGraphQLエンドポイントのクエリを可能にします。

> !注 [コードファーストの開発者ワークフロー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")に従い、GraphQLのコンポーネントレベルのクエリは [接続モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-connected-mode.html "Start a JSS app in connected mode")のみ実行できます。

> !警告**危険**コンポーネントレベルのgetStaticPropsおよびgetServerSideProps関数はクライアントサイドバンドルに含まれています。それらが依存するインポートもクライアントサイドバンドルに含まれており、クライアントサイドのコードがインポートを使わなくても含まれます。
> 
> 秘密や、明かしたくない機密情報は含めないでください。
> 
> これはページレベルのgetStaticPropsやgetServerSideProps機能には影響しません。

コード内では、Sitecore GraphQL Edgeエンドポイントで定義された型GraphQLに強い型を結びつけるのが良い慣例です。これを実現するために、アプリケーションはライブラリgraphql-letと[GraphQL内省データ](https://doc.sitecore.com/xp/ja/developers/hd/19/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クエリの例](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/components/graphql/GraphQL-ConnectedDemo.dynamic.graphql)に従ってGraphQLクエリを定義します。
    
    ライブラリgraphql-letはファイルGraphQL-ConnectedDemoQuery.graphql.d.tsを生成します。
    
2.  コンポーネントファイルに、次のインポート文を追加してください:
    
    import {
     GetServerSideComponentProps,
     GetStaticComponentProps,
     useComponentProps,
     GraphQLRequestClient} from '@sitecore-jss/sitecore-jss-nextjs';
    
3.  GraphQLクエリをインポートしてください。 [GraphQL-Let](https://github.com/piglovesyou/graphql-let)はクエリのインポート機能を提供します。
    
    import {
     ConnectedDemoQueryDocument,
     AppRoute,
     Item,
     GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,} from './ConnectedDemoQuery.graphql';
    
4.  コンポーネント内でgetStaticPropsまたはgetServerSideProps関数を定義します。この例ではgetStaticPropsを実装しています。GraphQLは切断モードで動作しないため、アプリが切断モードで動作する場合は関数を終了しなければなりません。また、GraphQLRequestClientクラスを使って新しいGraphQLクライアントを作成する必要があります。例えば:
    
    export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
     if (process.env.JSS\_MODE === constants.JSS\_MODE.DISCONNECTED) {
     return null;
     }
     const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, {
     apiKey: config.sitecoreApiKey,
     });
     }
    
5.  リクエストを実行し、結果を返します:
    
    export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
     if (process.env.JSS\_MODE === constants.JSS\_MODE.DISCONNECTED) {
     return null;
     }
     const graphQLClient = new GraphQLRequestClient(config.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;
    };
    
6.  コンポーネント関数では、useComponentPropsフックを使って得られたデータにアクセスできます:
    
    const GraphQLConnectedDemo = (props: StyleguideComponentProps): JSX.Element => {
     const data = useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid);
     // implement your component
    }
    
7.  編集モードでコンテンツを表示する戦略を実装してください。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はエンドポイントごとに異なることがあるので、スイッチングはエンドポイントを切り替えるのと同じロジックで行うようにしてください。
        

コンポーネントでGraphQLクエリを使ったより複雑な例については、[JSS Next.jsサンプルアプリのデモコンポーネント](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx)を参照してください。