Apollo Client in React einrichten

Installieren Sie @apollo/client und graphql. Das graphql-Paket ist eine Peer-Abhängigkeit, die Apollo Client zum Parsen von Abfragedokumenten mit dem gql-Template-Tag benötigt.

Für TypeScript-Projekte liefern beide Pakete ihre Typdefinitionen selbst mit, daher sind keine @types-Pakete erforderlich.

Erzeugen Sie eine ApolloClient-Instanz mit einem Cache und einem Link. Die einfachste Einrichtung: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Die uri-Kurzform erstellt intern einen HttpLink.

Für mehr Kontrolle erstellen Sie die Link-Kette manuell und übergeben sie anstelle von uri an die link-Option.

Umschließen Sie Ihre React-Anwendung mit ApolloProvider und der client-Prop: ApolloProvider client={client}. Dadurch steht die Apollo-Client-Instanz allen untergeordneten Komponenten über den React-Kontext zur Verfügung.

Jeder useQuery- und useMutation-Aufruf im Komponentenbaum verwendet automatisch diesen Client, ohne dass Props schrittweise weitergereicht werden müssen.

InMemoryCache ist der Standardcache von Apollo Client. Abgerufene Daten werden nach Typ und ID normalisiert, wobei jede Entität unter einem eindeutigen Cache-Schlüssel gespeichert wird (z. B. User:1). Wenn eine Query User:1 abruft, erhalten alle nachfolgenden Lesevorgänge dieser Entität die aktualisierten Daten.

Dank dieser Normalisierung aktualisiert das Ändern eines Benutzers in einer Mutation automatisch jedes Query-Ergebnis, das diesen Benutzer enthält, ohne zusätzlichen Code.

HttpLink übernimmt den HTTP-Transport von Apollo Client zu Ihrem GraphQL-Server. Konfigurieren Sie ihn mit uri und optional mit fetch, headers und credentials.

Für fortgeschrittene Anwendungsfälle leiten Split-Links verschiedene Operationen an verschiedene Endpunkte weiter: Subscriptions werden über WebSocket (WebSocketLink) übertragen, Queries und Mutationen über HTTP (HttpLink).

Importieren Sie setContext aus @apollo/client/link/context. Erstellen Sie einen Auth-Link: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Verketten Sie ihn vor HttpLink: authLink.concat(httpLink).

Der setContext-Link wird vor jeder Anfrage ausgeführt und fügt dynamisch jeder Operation Authentifizierungs-Header hinzu.

Setzen Sie Links mit ApolloLink.from([authLink, errorLink, httpLink]) oder authLink.concat(httpLink) zusammen. Links sind Middleware: Jeder Link verarbeitet die Operation und übergibt sie an next(). Der letzte Link in der Kette sendet die eigentliche HTTP-Anfrage.

Übliche Ketten: Auth-Link (Header hinzufügen) + Error-Link (Fehler behandeln) + HTTP-Link (Anfrage senden).

Importieren Sie onError aus @apollo/client/link/error. Der Error-Link fängt GraphQL-Fehler und Netzwerkfehler global ab. Verwenden Sie ihn, um bei UNAUTHENTICATED-Fehlern auf eine Anmeldeseite weiterzuleiten oder bei Netzwerkausfällen einen globalen Fehler-Toast anzuzeigen.

Der Error-Link muss in der Kette vor dem HTTP-Link stehen, kann aber forward(operation) aufrufen, um die Anfrage zu wiederholen.

cache-first (Standard): Daten sofort aus dem Cache zurückgeben; bei veralteten Daten im Hintergrund neu abrufen. network-only: immer vom Server abrufen und den Cache aktualisieren. cache-and-network: Daten sofort aus dem Cache zurückgeben UND abrufen; die Benutzeroberfläche aktualisieren, sobald die Antwort eintrifft. cache-only: nur aus dem Cache lesen und einen Fehler auslösen, wenn die Daten nicht gecacht sind. no-cache: immer abrufen und niemals in den Cache schreiben.

Wählen Sie anhand der erforderlichen Datenaktualität: Dashboards verwenden häufig cache-and-network, Benutzerprofilformulare network-only.

Legen Sie die Standard-Fetch-Policy in den defaultOptions des InMemoryCache fest: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Einzelne useQuery-Aufrufe können diese pro Query überschreiben.

Ein sinnvoller globaler Standard reduziert den wiederholten Code, der fetchPolicy bei jedem Hook-Aufruf anzugeben.

Die Apollo-Client-DevTools-Browsererweiterung fügt den Chrome DevTools ein Apollo-Panel hinzu. Sie zeigt alle gecachten Queries und deren aktuelle Daten, ermöglicht das Erkunden des normalisierten Caches und erlaubt das erneute Ausführen von Queries über das DevTools-Panel.

Installieren Sie die Erweiterung aus dem Chrome Web Store und initialisieren Sie den Client mit devtools: { enabled: true } (im Entwicklungsmodus standardmäßig aktiviert).

Wo sollte errorLink im Verhältnis zu httpLink platziert werden?

Installieren Sie @apollo/client und graphql, erstellen Sie einen ApolloClient mit InMemoryCache und einer Link-Kette und umschließen Sie die Anwendung mit ApolloProvider. Die Link-Kette kombiniert authLink (Tokens hinzufügen), errorLink (globale Fehlerbehandlung) und httpLink (HTTP-Transport). Die Fetch-Policy steuert die Priorität von Cache und Netzwerk; InMemoryCache normalisiert Entitäten nach Typ und ID.

Die Apollo-DevTools-Browsererweiterung macht das Untersuchen des Caches und das Debugging unkompliziert.