JSSアプリをJSS 22.0.0にアップグレードする

Version:

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

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

Sitecore JavaScriptレンダリングSDKバージョン22.0.0では、アプリに小さな変更を加える必要があります。

始める前に

まだアップグレードしていない場合は、アプリのJSS 21.7をアップグレードします。
Angular 17をサポートするためにすでに21.8にアップグレードしている場合、Angular 17の互換性を維持するためには、このガイドの手順を完了した直後に22.1にアップグレードする必要があることに注意してください。
JSS 22.0.0リリース・ノートをよく理解して、アップグレードの影響を理解してください。

このトピックでは、次の方法について説明します。

メモ

JSS Next.jsアプリケーションを更新するには、このトピックではなく、JSS Next.jsアプリのJSS 21.7から22.0.0への詳細なアップグレードガイドに従ってください。

Angularアプリを更新する

大事な

現在、アプリでJSS 21.8とAngular 17を使用している場合は、JSS 22.0にアップグレードした後、すぐに22.1に更新する必要があります。Angular 17の更新は、バージョン22.1から21.8にバックポートされていますが、バージョン22.0には存在しません。

AngularJSアプリケーションを更新するには:

JSS_APP_NAME環境変数が存在する場合は、名前をSITECORE_SITE_NAMEに変更します。

次のもので構成される /src/app/lib/client-factory.tsファイルを作成します。

import {
  GraphQLRequestClientFactoryConfig,
  GraphQLRequestClient,
} from '@sitecore-jss/sitecore-jss-angular';
import { environment as env } from '../../environments/environment';

// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application

/**
 * Creates a new GraphQLRequestClientFactory instance
 * @returns GraphQLRequestClientFactory instance
 */
export const createGraphQLClientFactory = () => {
  let clientConfig: GraphQLRequestClientFactoryConfig;

  if (env.graphQLEndpoint && env.sitecoreApiKey) {
    clientConfig = {
      endpoint: env.graphQLEndpoint,
      apiKey: env.sitecoreApiKey,
    };
  } else {
    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
  }

  return GraphQLRequestClient.createClientFactory(clientConfig);
};

export const clientFactory = createGraphQLClientFactory();

/src/app/lib/layout-service-factory.tsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLLayoutServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,
/src/app/lib/dictionary-service-factory.tsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLDictionaryServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,
以前にAngular 17をサポートするためにこのアプリをJSS 21.8にアップグレードしたことがある場合は、JSS 22.1にアップグレードする必要があります。

Reactアプリを更新する

Reactアプリケーションを更新するには:

REACT_APP_JSS_APP_NAME環境変数が存在する場合は、名前をREACT_APP_SITECORE_SITE_NAMEに変更します。
sitecore-jss/sitecore-jss-reactモジュールからインポートされたImageタイプを使用するすべてのコンポーネントで、mediapropの名前をfieldに変更します。

次のもので構成される /src/lib/client-factory.jsファイルを作成します。

import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-react';
import config from '../temp/config';

// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application

/**
 * Creates a new GraphQLRequestClientFactory instance
 * @returns GraphQLRequestClientFactory instance
 */
export const createGraphQLClientFactory = () => {
  let clientConfig;

  if (config.graphQLEndpoint && config.sitecoreApiKey) {
    clientConfig = {
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
    };
  } else {
    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
  }

  return GraphQLRequestClient.createClientFactory(clientConfig);
};

export const clientFactory = createGraphQLClientFactory();

/src/lib/layout-service-factory.jsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLLayoutServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,
/src/lib/dictionary-service-factory.jsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLDictionaryServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,

Vue.jsアプリを更新する

Vue.jsアプリケーションを更新するには:

VUE_APP_JSS_APP_NAME環境変数が存在する場合は、名前をVUE_APP_SITECORE_SITE_NAMEに変更します。

次のもので構成される /src/lib/client-factory.jsファイルを作成します。

import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-vue';
import config from '../temp/config';

// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application

/**
 * Creates a new GraphQLRequestClientFactory instance
 * @returns GraphQLRequestClientFactory instance
 */
export const createGraphQLClientFactory = () => {
  let clientConfig;

  if (config.graphQLEndpoint && config.sitecoreApiKey) {
    clientConfig = {
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
    };
  } else {
    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
  }

  return GraphQLRequestClient.createClientFactory(clientConfig);
};

export const clientFactory = createGraphQLClientFactory();

/src/lib/layout-service-factory.jsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLLayoutServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,
/src/lib/dictionary-service-factory.jsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLDictionaryServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,

NodeヘッドレスSSR Experience Edgeアプリを更新する

NodeヘッドレスSSR Experience Edgeアプリを更新するには:

次のもので構成される /src/client-factory.tsファイルを作成します。

import {
  GraphQLRequestClientFactoryConfig,
  GraphQLRequestClient,
} from '@sitecore-jss/sitecore-jss';
import { config } from './config';

// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application

/**
 * Creates a new GraphQLRequestClientFactory instance
 * @returns GraphQLRequestClientFactory instance
 */
export const createGraphQLClientFactory = () => {
  let clientConfig: GraphQLRequestClientFactoryConfig;

  if (config.endpoint && config.apiKey) {
    clientConfig = {
      endpoint: config.endpoint,
      apiKey: config.apiKey,
    };
  } else {
    throw new Error('Please configure your endpoint and apiKey.');
  }

  return GraphQLRequestClient.createClientFactory(clientConfig);
};

export const clientFactory = createGraphQLClientFactory();

/src/index.tsファイルを次のように変更します。
- 次のimportステートメントを追加します。
  import { clientFactory } from './client-factory';
- 次のGraphQLLayoutServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.endpoint, apiKey: config.apiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,
- 次のGraphQLDictionaryServiceコンストラクタオプション (存在する場合) を見つけます。
  endpoint: config.endpoint, apiKey: config.apiKey,
- これらのオプションを次のように置き換えます。
  clientFactory,

アプリケーションの依存関係を更新する

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

依存関係を更新するには:

既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.0.0に更新します。
次のコマンドを使用して依存関係をインストールします。
npm install

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