GraphQLを使用して、JSS Next.jsアプリでコンポーネントレベルのデータを取得する

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

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

Next.jsサンプル アプリでは、GraphQLを使用して コンポーネント レベルのデータを取得する ための2つの方法がサポートされています。

メモ

コンポーネント レベルのgetStaticProps関数とgetServerSideProps関数にシークレットまたは機密情報を含めると、その情報は開発モードのクライアント側バンドルにのみ含まれます。

接続されたGraphQLによるコンポーネントレベルのデータ取得

このコードでは、Sitecore GraphQL Edgeエンドポイントで定義されたGraphQL型に強力な型を接続することをお勧めします。アプリケーションは、ライブラリのgraphql-letとGraphQLイントロスペクションデータ を使用してこれを実現します。

サンプルアプリには、スキーマを探索し、クエリをテストするためのGraphiQLインターフェイスが用意されています。デフォルトでは、インターフェイスには ${:placeholder-token:}{SITECORE_API_HOST}{/:placeholder-token:}/sitecore/api/graph/edge/ui?sc_apikey=${:placeholder-token:}{SITECORE_API_KEY}{/:placeholder-token:}を使用してアクセスできます。このインターフェースは、コンポーネントで使用できるGraphQLタイプを決定する場合に役立ちます。

手記

graphql-letライブラリは、対応する .graphq.d.tsファイル内の型について同じ情報を提供します。

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

  1. GraphQL-ConnectedDemo.graphqlファイルで、Connected Demoクエリの例に従ってGraphQLクエリを定義します。

    ライブラリgraphql-letは ファイル . GraphQL-ConnectedDemoQuery.graphql.d.tsを生成します。

  2. コンポーネントファイルに、次のimportステートメントを追加します。

    RequestResponse
    import {
  constants,
  GetServerSideComponentProps,
  GetStaticComponentProps,
  useComponentProps,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';

  3. 必要に応じて、イントロスペクションデータを更新して 、最新のGraphQLタイプにアクセスできるようにします。

  4. GraphQLクエリをインポートします。

    RequestResponse
    import {
  ConnectedDemoQueryDocument,
  AppRoute,
  Item,
  GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,} from './ConnectedDemoQuery.graphql';

  5. コンポーネントで、getStaticPropsまたはgetServerSideProps関数を定義します。この例では、getStaticPropsを実装します。GraphQLは切断モードでは動作しないため、アプリが切断モードで実行されている場合は、関数を終了する必要があります。また、lib/graphql-client-factoryのgraphqlClientFactoryプロパティを使用して、新しいGraphQLクライアントを作成する必要があります。例えば：

    RequestResponse
    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. 要求を実行し、結果を返します。

    RequestResponse
    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フックを使用して結果データにアクセスできます。

    RequestResponse
    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から提供されるため、サイト訪問者と同じデータが表示されます。

    • コンポーネントでプレースホルダーマークアップをレンダリングするには:

      RequestResponse
      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という名前の環境変数に割り当てたと仮定します。

      RequestResponse
      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コンポーネントと比較できます。

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

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

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

GraphQLクエリは、レイアウト サービスによって返されるデータを整形するレンダリング項目に対して定義でき、標準の応答と同じ方法でprops.fieldsオブジェクトから使用できます。これにより、返されるデータの形状をより詳細に制御できます。

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

The Component GraphQL Query field, containing an integrated GraphQL query.
先端

必要に応じて、設定のガイダンスについては 、Sitecoreサンプル アプリの統合されたGraphQLコンポーネント を参照してください。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、