升級至 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
。
若要測試您的變更是否成功,請執行以下命令:
npm install
安裝必要的react-query
相依項目。npm start
驗證應用程式是否能於本機執行。npm run build
驗證建置流程是否成功。npm run push
(並透過 Runtime Admin 部署) 驗證套件部署是否成功。
若要進一步瞭解 React Query 及如何使用,請參閱 React Query 文件。