GraphQLを使ってJSS Next.jsアプリでコンポーネントレベルのデータを取得してください

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

コード内では、Sitecore GraphQL Edgeエンドポイントで定義されたGraphQL型に強い型を結びつけるのが良い慣例です。アプリケーションはライブラリgraphql-letとGraphQL内省データ を使ってこれを実現します。

サンプルアプリはスキーマの探索やクエリのテストを行うための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型にアクセスできるように 内省データを更新 してください。

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(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(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 (

     This would usually render dynamic GraphQL data. This stub is used only for editing mode.
     ); } // ... 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(MyQuery, { datasource: rendering.dataSource, contextItem: layoutData?.sitecore?.route?.itemId, language: layoutData?.sitecore?.context?.language, });

       return result; };

     !注sitecoreApiKeyはエンドポイントごとに異なることがあるので、スイッチングはエンドポイントを切り替えるのと同じロジックで行うようにしてください。

アプリケーションを正しく設定しているか確認するために、Sitecoreサンプルアプリに含まれる接続されたGraphQLコンポーネントと比較してください。

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

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

統合GraphQL(IGQL)は 、Experience Edgeレイアウト応答によって特定のコンポーネントに対して返されるレイアウトデータ形状に直接影響します。

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

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

!ヒント必要に応じて、Sitecoreサンプルアプリの統合GraphQLコンポーネント をご参照ください。