Upgrade a v2.3

Se si esegue l’upgrade di un progetto PWA Kit creato prima della disponibilità della versione 2, seguire prima le istruzioni della guida Upgrade a v2.

Important

Per usufruire delle funzionalità di accettazione disponibili in v2.3, in particolare l’integrazione di react-query, è necessario apportare alcune modifiche a _app-config/index.js, _app/index.js e package.json nel progetto PWA Kit.

Modifiche di _app-config/index.js

Aprire _app-config/index.js e apportare le seguenti modifiche.

Importare i componenti di ordine superiore richiesti per abilitare react-query e mantenere il supporto di 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'

Aggiungere l’oggetto options con la configurazione di React Query consigliata.

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}

Aggiornare la definizione del componente AppConfig esportato.

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

Modifiche di _app/index.js

Aprire _app/index.js e apportare le seguenti modifiche.

Dichiarare una variabile denominata DEFAULT_LOCALE per archiviare l’impostazione locale predefinita per la visualizzazione dei messaggi nell’applicazione. Per un progetto appena generato, i messaggi predefiniti sono scritti in inglese per l’impostazione locale degli Stati Uniti. Se i messaggi predefiniti non sono stati riscritti, en-US è il valore corretto per DEFAULT_LOCALE. In caso contrario, impostare DEFAULT_LOCALE su un valore diverso, ad esempio fr-fr o ja-jp.

1+ const DEFAULT_LOCALE = 'en-US'

Assegnare DEFAULT_LOCALE come valore predefinito per la proprietà targetLocale.

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

Sostituire defaultLocale con il nuovo valore statico.

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

Se abilitate, le funzioni useQuery e getProps vengono eseguite in parallelo. Un effetto collaterale dell’esecuzione in parallelo è che il rendering condizionale di un componente in base al valore restituito di getProps può causare la mancata esecuzione di alcuni hook useQuery sul server. Per semplicità, si consiglia di scegliere getProps o useQuery per il recupero dei dati.

Note

Modifiche di package.json

Aggiungere react-query a devDependencies.

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

Test delle modifiche

Per verificare che le modifiche siano state apportate correttamente, eseguire i seguenti comandi:

npm install per installare la dipendenza react-query obbligatoria.
npm start per verificare che l’app possa essere eseguita in locale.
npm run build per verificare che il processo di compilazione sia corretto.
npm run push (e distribuzione tramite Runtime Admin) per verificare che la distribuzione di un bundle sia corretta.

Ulteriori letture

Per ulteriori informazioni su React Query e su come utilizzarlo, consultare la documentazione di React Query.