升級至 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 文件。