升级至 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 Query 配置添加 options 对象。

更新导出的 AppConfig 组件定义。

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

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

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

将 defaultLocale 替换为新静态值。

如果启用，则 useQuery 和 getProps 函数将并行运行。并行运行的副作用是，根据 getProps 返回值有条件地渲染组件可能会导致某些 useQuery Hook 无法在服务器上运行。为了简单起见，我们建议您选择 getProps 或 useQuery 来获取数据。

添加 react-query 至您的 devDependencies。

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

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

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