升级至 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 Query 配置添加 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)

更改为 _app/index.js

打开 _app/index.js 并进行以下更改。

声明一个名为 DEFAULT_LOCALE 的变量，以存储在应用程序中显示消息的默认区域设置。对于新生成的项目，默认消息以美国区域设置的英语编写。如果您还未重写默认消息，则 en-US 是 DEFAULT_LOCALE 的正确值。否则，将 DEFAULT_LOCALE 设置为不同的值，例如 fr-fr 或 ja-jp。

1+ const DEFAULT_LOCALE = 'en-US'

指定 DEFAULT_LOCALE 为 targetLocale 属性的默认值。

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 Hook 无法在服务器上运行。为了简单起见，我们建议您选择 getProps 或 useQuery 来获取数据。

Note

对 package.json 的更改

添加 react-query 至您的 devDependencies。

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

测试更改

要测试您的更改是否成功，请运行以下命令：

npm install 安装所需的 react-query 依赖项。
npm start 验证应用程序是否能够在本地运行。
npm run build 用于验证构建过程是否成功。
npm run push（并通过 Runtime Admin 部署）以验证部署捆绑包是否成功。

详细阅读

要了解有关 React Query 及其使用方式的更多信息，请参阅React Query 文档。