Aktualisierung auf v2.3

Wenn Sie ein PWA Kit-Projekt aktualisieren, das vor der Verfügbarkeit von v2 erstellt wurde, befolgen Sie zuerst die Anweisungen für die Aktualisierung auf v2.

Important

Um die in v2.3 verfügbaren aktivierbaren Funktionalitäten - insbesondere die react-query-Integration - zu nutzen, müssen Sie an _app-config/index.js, _app/index.js und package.json in Ihrem PWA Kit-Projekt einige Änderungen vornehmen.

Änderungen an _app-config/index.js

Öffnen Sie _app-config/index.js und nehmen Sie die folgenden Änderungen vor.

Importieren Sie die übergeordneten Komponenten, die für die Aktivierung von react-query und die fortgesetzte getProps-Unterstützung erforderlich sind.

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'

Fügen Sie das options-Objekt mit der empfohlenen React Query-Konfiguration hinzu.

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}

Aktualisieren Sie die exportierte AppConfig-Komponentendefinition.

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

Änderungen an _app/index.js

Öffnen Sie _app/index.js und nehmen Sie die folgenden Änderungen vor.

Deklarieren Sie eine Variable namens DEFAULT_LOCALE, um das Standard-Gebietsschema für die Meldungsanzeige in Ihrer Anwendung zu speichern. Bei einem neu generierten Projekt werden die Standardmeldungen gemäß des USA-Gebietsschemas auf Englisch geschrieben. Wenn Sie die Standardmeldungen nicht umgeschrieben haben, dann ist en-US der richtige Wert für DEFAULT_LOCALE. Setzen Sie ansonsten DEFAULT_LOCALE auf einen anderen Wert wie beispielsweise fr-fr oder ja-jp.

1+ const DEFAULT_LOCALE = 'en-US'

Weisen Sie DEFAULT_LOCALE der Eigenschaft targetLocale als Standardwert zu.

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

Ersetzen Sie defaultLocale durch den neuen statischen Wert.

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

Sofern aktiviert, werden die Funktionen useQuery und getProps parallel ausgeführt. Ein Nebeneffekt dieser parallelen Ausführung ist, dass das bedingte Rendering einer Komponente anhand des Rückgabewerts von getProps dazu führen kann, dass einige useQuery-Hooks auf dem Server nicht ausgeführt werden. Der Einfachheit halber empfehlen wir, dass Sie für den Datenabruf entweder getProps oder useQuery wählen.

Note

Änderungen an package.json

Fügen Sie react-query zu devDependencies hinzu.

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

Testen der Änderungen

Sie können testen, ob Ihre Änderungen erfolgreich waren. Führen Sie dazu die folgenden Befehle aus:

npm install, um die erforderliche react-query-Abhängigkeit zu installieren.
npm start, um zu bestätigen, dass die App lokal ausgeführt werden kann.
npm run build, um zu bestätigen, dass der Build-Prozess erfolgreich ist.
npm run push (und über Runtime Admin bereitstellen), um zu bestätigen, dass die Bereitstellung eines Bündels erfolgreich ist.

Weiterführende Informationen

In der React Query-Dokumentation erfahren Sie mehr über React Query und die Anwendung dieser Bibliothek.