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

Version:

日本語翻訳に関する免責事項

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

Next.jsサンプルアプリは、コンポーネントレベルでのGraphQLエンドポイントのクエリを可能にするコンポーネントレベルのデータフェッチをサポートしています。コードファーストの開発者ワークフローに従って、GraphQLコンポーネントレベルのクエリは接続モードでのみ実行できます。

危険

シークレットや機密情報をコンポーネントレベルのgetStaticProps関数とgetServerSideProps関数に含めないでください。これらの関数は、クライアント側バンドルに含まれています。また、クライアントバンドルには、クライアント側のコードがインポートを使用していない場合でも、関数が依存するインポートも含まれます。

これは、ページ・レベルのgetStaticPropsおよびgetServerSideProps機能には影響しません。

このコードでは、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でコンポーネントレベルのデータフェッチを使用するには:

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

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

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

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

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

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

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

コンポーネントで、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,  
    });
 }

要求を実行し、結果を返します。

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;
};

コンポーネント関数では、useComponentPropsフックを使用して結果データにアクセスできます。

const GraphQLConnectedDemo = (props: StyleguideComponentProps): JSX.Element => {
  const data = useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid);
  // implement your component
}

編集モードでコンテンツを表示するための戦略を実装します。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クエリの使用に関するより複雑な例については、nextjs-styleguideアドオンテンプレートで、/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsxで定義されているコンポーネントを参照してください。

この記事を改善するための提案がある場合は、お知らせください!