切断モードでの GraphQL を使用した JSS Next.js アプリの実行

Version: 20.x

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

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

切断された開発サーバーは REST サービスをエミュレートするだけなので、GraphQL を使用するには、JSS アプリケーションは Sitecore インスタンスに接続されている必要があります。したがって、JSS アプリケーションを切断モードで実行している場合、サービスファクトリは REST サービスを返す必要があります。

環境変数 JSS_MODE を使用して、切断モードとその他のモードをJavaScript コードで区別できます。

サービスファクトリから REST サービスを返すには:

切断モードで実行している場合に、LayoutServiceFactory クラスが RestLayoutService インスタンスを返すように、src/lib/layout-service-factory ファイルを変更します。

RequestResponse

import {
  LayoutService,
  GraphQLLayoutService,
  RestLayoutService,
  constants,
} from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';

export class LayoutServiceFactory {
  create(): LayoutService {
    // Switch to REST endpoint if we are in disconnected mode
    if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
      return new RestLayoutService({
        apiHost: `http://localhost:${process.env.PROXY_PORT || 3042}`,
        apiKey: config.sitecoreApiKey,
        siteName: config.jssAppName,
      });
    }

    return new GraphQLLayoutService({
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
    });
  }
}

export const layoutServiceFactory = new LayoutServiceFactory();

切断モードで実行している場合に、DictionaryServiceFactory クラスが RestDictionaryService インスタンスを返すように、src/lib/dictionary-service-factory.ts ファイルを変更します。

RequestResponse

import {
  DictionaryService,
  RestDictionaryService,
  GraphQLDictionaryService,
  constants,
} from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';

export class DictionaryServiceFactory {
  create(): DictionaryService {
    // Switch to REST endpoint if we are in disconnected mode
    if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
      return new RestDictionaryService({
        apiHost: `http://localhost:${process.env.PROXY_PORT || 3042}`,
        apiKey: config.sitecoreApiKey,
        siteName: config.jssAppName,
      });
    }

    return new GraphQLDictionaryService({
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
    });
  }
}

export const dictionaryServiceFactory = new DictionaryServiceFactory();

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

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