Konfigurere Apollo Client i React

Installer @apollo/client og graphql. graphql-pakken er en peer-avhengighet som Apollo Client trenger for å tolke spørringsdokumenter med gql-maletaggen.

I TypeScript-prosjekter leveres begge pakkene med egne typedefinisjoner, så ingen @types-pakker er nødvendige.

Opprett en ApolloClient-instans med en hurtigbuffer og en lenke. Det enkleste oppsettet er: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Den korte uri-syntaksen oppretter en HttpLink internt.

For større kontroll kan De bygge lenkekjeden manuelt og sende den til link-alternativet i stedet for uri.

Pakk React-applikasjonen inn i ApolloProvider med client-prop-en: ApolloProvider client={client}. Dette gjør Apollo Client-instansen tilgjengelig for alle etterfølgende komponenter via React-kontekst.

Alle useQuery- og useMutation-kall i komponenttreet bruker automatisk denne klienten uten at props må sendes gjennom mellomliggende komponenter.

InMemoryCache er standardhurtigbufferet i Apollo Client. Det normaliserer hentede data etter type og ID og lagrer hver entitet under en unik hurtigbuffernøkkel, for eksempel User:1. Når en spørring henter User:1, får alle etterfølgende lesinger av denne entiteten de oppdaterte dataene.

Denne normaliseringen innebærer at en oppdatering av en bruker i én mutasjon automatisk oppdaterer alle spørringsresultater som inneholder brukeren, uten ekstra kode.

HttpLink håndterer HTTP-transporten fra Apollo Client til GraphQL-serveren. Konfigurer den med uri og eventuelt fetch, headers og credentials.

Ved avanserte bruksområder kan delte lenker sende ulike operasjoner til forskjellige endepunkter: abonnementer går via WebSocket (WebSocketLink), mens spørringer og mutasjoner går via HTTP (HttpLink).

Importer setContext fra @apollo/client/link/context. Opprett en autentiseringslenke: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Kjed den sammen før HttpLink: authLink.concat(httpLink).

setContext-lenken kjøres før hver forespørsel og legger dynamisk til autentiseringsheadere for hver operasjon.

Sett sammen lenker med ApolloLink.from([authLink, errorLink, httpLink]) eller authLink.concat(httpLink). Lenker fungerer som mellomvare: hver lenke behandler operasjonen og sender den videre til next(). Den siste lenken i kjeden sender den faktiske HTTP-forespørselen.

Vanlige kjeder er autentiseringslenke (legg til headere) + feillenke (håndter feil) + HTTP-lenke (send forespørsel).

Importer onError fra @apollo/client/link/error. Feillenken fanger opp GraphQL-feil og nettverksfeil globalt. Bruk den til å omdirigere til en innloggingsside ved UNAUTHENTICATED-feil, eller vise et globalt feilmeldingsvarsel ved nettverksfeil.

Feillenken må plasseres før HTTP-lenken i kjeden, men kan kalle forward(operation) for å prøve forespørselen på nytt.

cache-first (standard): returner bufrede data umiddelbart, og hent på nytt i bakgrunnen hvis dataene er foreldede. network-only: hent alltid fra serveren og oppdater hurtigbufferet. cache-and-network: returner hurtigbufferet umiddelbart OG hent data, og oppdater brukergrensesnittet når svaret kommer. cache-only: les bare fra hurtigbufferet, og kast en feil hvis dataene ikke finnes der. no-cache: hent alltid, men skriv aldri til hurtigbufferet.

Velg basert på kravene til dataenes aktualitet: Kontrollpaneler bruker ofte cache-and-network, mens skjemaer for brukerprofiler bruker network-only.

Angi standardverdien for fetchPolicy i defaultOptions for InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Individuelle useQuery-kall kan overstyre dette for hver spørring.

En fornuftig global standard reduserer behovet for å angi fetchPolicy i hvert eneste hook-kall.

Nettleserutvidelsen Apollo Client DevTools legger til et Apollo-panel i Chrome DevTools. Den viser alle bufrede spørringer og de aktuelle dataene, lar Dem utforske det normaliserte hurtigbufferet og gir mulighet til å kjøre spørringer på nytt fra DevTools-panelet.

Installer utvidelsen fra Chrome Nettmarked, og initialiser klienten med devtools: { enabled: true } (standard i utviklingsmodus).

Installer @apollo/client og graphql, opprett en ApolloClient med InMemoryCache og en lenkekjede, og pakk appen inn i ApolloProvider. Lenkekjeden setter sammen authLink (legg til tokens), errorLink (global feilhåndtering) og httpLink (HTTP-transport). Hentepolicyen styrer prioriteringen mellom hurtigbuffer og nettverk, mens InMemoryCache normaliserer entiteter etter type og ID.

Nettleserutvidelsen Apollo DevTools gjør det enkelt å inspisere hurtigbufferet og feilsøke.