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.

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.

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.

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

Aggiornare la definizione del componente AppConfig esportato.

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.

Assegnare DEFAULT_LOCALE come valore predefinito per la proprietà targetLocale.

Sostituire defaultLocale con il nuovo valore statico.

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.

Aggiungere react-query a devDependencies.

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

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

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