v2.3 へのアップグレード

v2 が利用可能になる前に作成された PWA Kit プロジェクトをアップグレードする場合は、まず v2 へのアップグレード ガイドの手順に従ってください。

v2.3 で利用可能なオプトイン機能、特に react-query 統合を利用するには、PWA Kit プロジェクトの _app-config/index.js、_app/index.js、および package.json にいくつかの変更を加える必要があります。

_app-config/index.js を開いて次の変更を行います。

react-query の有効化と getProps のサポート維持に必要な高階コンポーネントをインポートします。

推奨される React クエリ構成を使用して options のオブジェクトを追加します。

エクスポートされた AppConfig コンポーネント定義を更新します。

_app/index.js を開いて次の変更を行います。

DEFAULT_LOCALE という名前の変数を宣言して、アプリケーションでメッセージを表示するデフォルトの地域を保存します。新しく生成されたプロジェクトの場合、デフォルトのメッセージは米国地域向けに英語で書かれています。デフォルトのメッセージを書き換えていない場合、DEFAULT_LOCALE の正しい値は en-US です。それ以外の場合は、DEFAULT_LOCALE を fr-fr や ja-jp などの別の値に設定します。

targetLocale プロパティのデフォルト値として DEFAULT_LOCALE を割り当てます。

defaultLocale を新しい静的な値に置き換えます。

有効にすると、useQuery と getProps の機能が並列で実行されます。並列実行の問題点として、getProps の戻り値に基づいてコンポーネントを条件付きでレンダリングすると、一部の useQuery フックがサーバー上で実行されなくなる可能性があります。簡便さのために、データの取得には getProps または useQuery を選択することをお勧めします。

devDependencies に react-query を加えます。

変更が正常に行われたかどうかをテストするには、次のコマンドを実行します。

  1. npm install で、必要な react-query 依存関係をインストールします。
  2. npm start で、アプリがローカルで実行できることを確認します。
  3. npm run build で、ビルド処理が正常に行われたことを確認します。
  4. npm run push (および Runtime Admin 経由でのデプロイ) で、バンドルのデプロイが正常に行われたことを確認します。

React クエリとその使用方法の詳細については、React クエリのドキュメントを参照してください。