Apollo Client instellen in React

Installeer @apollo/client en graphql. Het pakket graphql is een peerafhankelijkheid die Apollo Client nodig heeft om querydocumenten te parseren met de gql-template-tag.

Voor TypeScript-projecten leveren beide pakketten hun eigen typedefinities mee, dus je hebt geen @types-pakketten nodig.

Maak een ApolloClient-instantie met een cache en een link. De eenvoudigste configuratie is: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). De verkorte uri-notatie maakt intern een HttpLink aan.

Voor meer controle bouw je de link-keten handmatig op en geef je die door aan de optie link in plaats van uri.

Wikkel je React-applicatie in ApolloProvider met de prop client: ApolloProvider client={client}. Hierdoor is de Apollo Client-instantie via de React-context beschikbaar voor alle onderliggende componenten.

Elke aanroep van useQuery en useMutation in de componentenboom gebruikt automatisch deze client, zonder dat je props via tussenliggende componenten hoeft door te geven.

InMemoryCache is de standaardcache van Apollo Client. De cache normaliseert opgehaalde gegevens op basis van type en ID en slaat elke entiteit op onder een unieke cachesleutel (bijvoorbeeld User:1). Wanneer een query User:1 ophaalt, ontvangen alle volgende leesbewerkingen van die entiteit de bijgewerkte gegevens.

Dankzij deze normalisatie wordt het bijwerken van een gebruiker in één mutatie automatisch verwerkt in elk queryresultaat waarin die gebruiker voorkomt, zonder extra code.

HttpLink verzorgt het HTTP-transport van Apollo Client naar je GraphQL-server. Configureer deze met uri en eventueel fetch, headers en credentials.

Voor geavanceerde toepassingen leiden gesplitste links verschillende bewerkingen naar verschillende eindpunten: subscriptions gaan via WebSocket (WebSocketLink), en query's en mutaties gaan via HTTP (HttpLink).

Importeer setContext uit @apollo/client/link/context. Maak een auth-link: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Koppel deze vóór HttpLink: authLink.concat(httpLink).

De setContext-link wordt vóór elk verzoek uitgevoerd en voegt dynamisch authenticatieheaders toe aan elke bewerking.

Stel links samen met ApolloLink.from([authLink, errorLink, httpLink]) of authLink.concat(httpLink). Links zijn middleware: elke link verwerkt de bewerking en geeft deze door aan next(). De laatste link in de keten verstuurt het daadwerkelijke HTTP-verzoek.

Veelgebruikte ketens zijn: auth-link (headers toevoegen) + error-link (fouten afhandelen) + HTTP-link (verzoek versturen).

Importeer onError uit @apollo/client/link/error. De foutlink onderschept GraphQL-fouten en netwerkfouten globaal. Gebruik deze om bij UNAUTHENTICATED-fouten naar een aanmeldpagina door te verwijzen of bij netwerkproblemen een globale foutmelding te tonen.

De foutlink moet vóór de HTTP-link in de keten staan, maar kan forward(operation) aanroepen om het verzoek opnieuw te proberen.

cache-first (standaard): geef gecachte gegevens direct terug; haal ze op de achtergrond opnieuw op als ze verouderd zijn. network-only: haal altijd gegevens van de server op en werk de cache bij. cache-and-network: geef de cache direct terug EN haal gegevens op; werk de interface bij wanneer het antwoord binnenkomt. cache-only: lees alleen uit de cache en geef een fout als de gegevens niet in de cache staan. no-cache: haal altijd gegevens op en schrijf nooit naar de cache.

Maak je keuze op basis van de vereisten voor gegevensactualiteit: dashboards gebruiken vaak cache-and-network; formulieren voor gebruikersprofielen gebruiken network-only.

Stel het standaard-fetchPolicy in via defaultOptions van InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Afzonderlijke useQuery-aanroepen kunnen dit per query overschrijven.

Een zinvolle globale standaardwaarde beperkt de hoeveelheid herhalende code waarin je fetchPolicy bij elke hookaanroep moet opgeven.

De browserextensie Apollo Client DevTools voegt een Apollo-paneel toe aan Chrome DevTools. Je kunt er alle gecachte query's en hun huidige gegevens in bekijken, de genormaliseerde cache verkennen en query's opnieuw uitvoeren vanuit het DevTools-paneel.

Installeer de extensie vanuit de Chrome Web Store en initialiseer de client met devtools: { enabled: true } (standaard in de ontwikkelmodus).

Installeer @apollo/client en graphql, maak een ApolloClient met InMemoryCache en een link-keten en wikkel de app in ApolloProvider. De link-keten combineert authLink (tokens toevoegen), errorLink (globale foutafhandeling) en httpLink (HTTP-transport). Het fetchbeleid bepaalt of de cache of het netwerk voorrang krijgt; InMemoryCache normaliseert entiteiten op basis van type+id.

De Apollo DevTools-browserextensie maakt cache-inspectie en foutopsporing eenvoudig.