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

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

Important

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

_app-config/index.js への変更

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

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

1- import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
2+ import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'

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

1// Determine whether the code is running server-side or client-side based on the presence of the window object. Set isServerSide to true if running server-side or false if running client-side.
2const isServerSide = typeof window === 'undefined'
3
4// Recommended settings for PWA-Kit usages.
5// NOTE: They will be applied server-side and client-side.
6const options = {
7  queryClientConfig: {
8    defaultOptions: {
9      queries: {
10        retry: false,
11        staleTime: 2 * 1000,
12
13        // If isServerSide is true, disable retries on mount.
14        ...(isServerSide ? {retryOnMount: false} : {})
15      },
16      mutations: {
17        retry: false
18      }
19    }
20  }
21}

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

1- export default AppConfig
2+ export default withReactQuery(withLegacyGetProps(AppConfig), options)

Changes to _app/index.js

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

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

1+ const DEFAULT_LOCALE = 'en-US'

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

1- const {children, targetLocale, messages, categories: allCategories = {}} = props
2+ const {
3+     children,
4+     targetLocale = DEFAULT_LOCALE,
5+     messages = {},
6+     categories: allCategories = {}
7+ } = props

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

1- defaultLocale="en-US"
2+ defaultLocale={DEFAULT_LOCALE}

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

Note

package.json への変更

devDependencies に react-query を加えます。

1+ "@tanstack/react-query": "^4.0.10",

変更内容のテスト

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

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

その他の参考文献

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