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

Angularアプリのアップデート

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

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

1. JSS_APP_NAME環境変数が存在する場合は、SITECORE_SITE_NAMEにリネームします。

2. 以下からなる /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();

3. /src/app/lib/layout-service-factory.tsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLLayoutServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

4. /src/app/lib/dictionary-service-factory.tsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLDictionaryServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

5. 以前にAngular 17対応のためにこのアプリをJSS 21.8にアップグレードしている場合は、今後JSS 22.1にアップグレードする必要があります。

Reactアプリの更新

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

1. REACT_APP_JSS_APP_NAME環境変数が存在する場合は、REACT_APP_SITECORE_SITE_NAMEに名前を変更します。

2. sitecore-jss/sitecore-jss-reactモジュールからインポートしたImage型を使用するすべてのコンポーネントでは、mediaプロップをfieldにリネームします。

3. 以下からなる /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();

4. /src/lib/layout-service-factory.jsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLLayoutServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

5. /src/lib/dictionary-service-factory.jsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLDictionaryServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

アプリの更新Vue.js

Vue.js申請を更新するには:

1. VUE_APP_JSS_APP_NAME環境変数が存在する場合は、VUE_APP_SITECORE_SITE_NAMEにリネームします。

2. 以下からなる /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();

3. /src/lib/layout-service-factory.jsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLLayoutServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

4. /src/lib/dictionary-service-factory.jsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLDictionaryServiceコンストラクタオプションを探してください:

     endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

NodeのヘッドレスSSR Experience Edgeアプリを更新してください

Node headless SSR Experience Edgeアプリのアップデート:

1. 以下からなる /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();

2. /src/index.tsファイルを以下のように修正します:

   • 以下のインポートステートメントを追加してください:

     import { clientFactory } from './client-factory';

   • もし存在する場合は、以下のGraphQLLayoutServiceコンストラクタオプションを探してください:

     endpoint: config.endpoint, apiKey: config.apiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

   • もし存在する場合は、以下のGraphQLDictionaryServiceコンストラクタオプションを探してください:

     endpoint: config.endpoint, apiKey: config.apiKey,

   • それらのオプションを以下のものに置き換えてください:

     clientFactory,

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

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

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

1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.0.0に更新してください。

2. 以下のコマンドで依存関係をインストールします:

   npm install