Opsætning af Apollo Client i React

Installér @apollo/client og graphql. graphql-pakken er en peer-afhængighed, som Apollo Client kræver for at fortolke forespørgselsdokumenter med gql-skabelontagget.

I TypeScript-projekter indeholder begge pakker deres egne typeangivelser, så der er ikke brug for @types-pakker.

Opret en ApolloClient-instans med en cache og et link. Den enkleste opsætning er: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Den korte uri-form opretter internt et HttpLink.

Hvis du har brug for mere kontrol, kan du opbygge link-kæden manuelt og give den videre til link-indstillingen i stedet for uri.

Indpak din React-applikation i ApolloProvider med client-proppen: ApolloProvider client={client}. Det gør Apollo Client-instansen tilgængelig for alle underordnede komponenter via React-context.

Alle kald til useQuery og useMutation i komponenttræet bruger automatisk denne klient, uden at du behøver at videresende props gennem komponenterne.

InMemoryCache er Apollo Clients standardcache. Den normaliserer hentede data efter type og id og gemmer hver entitet under en unik cache-nøgle (for eksempel User:1). Når en forespørgsel henter User:1, modtager alle efterfølgende læsninger af entiteten de opdaterede data.

Denne normalisering betyder, at en opdatering af en bruger i én mutation automatisk opdaterer alle forespørgselsresultater, der indeholder brugeren, uden ekstra kode.

HttpLink håndterer HTTP-transporten fra Apollo Client til din GraphQL-server. Konfigurér det med uri og eventuelt fetch, headers og credentials.

I avancerede scenarier kan opdelte links dirigere forskellige operationer til forskellige slutpunkter: abonnementer sendes via WebSocket (WebSocketLink), mens forespørgsler og mutationer sendes via HTTP (HttpLink).

Importér setContext fra @apollo/client/link/context. Opret et godkendelseslink: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Kæd det sammen før HttpLink: authLink.concat(httpLink).

setContext-linket køres før hver forespørgsel og tilføjer dynamisk godkendelsesheadere til hver operation.

Sammensæt links med ApolloLink.from([authLink, errorLink, httpLink]) eller authLink.concat(httpLink). Links fungerer som mellemlag: hvert link behandler operationen og sender den videre til next(). Det sidste link i kæden sender den faktiske HTTP-forespørgsel.

Almindelige kæder er: godkendelseslink (tilføj headere) + fejllink (håndtér fejl) + HTTP-link (send forespørgsel).

Importér onError fra @apollo/client/link/error. Fejllinket opfanger GraphQL-fejl og netværksfejl globalt. Brug det til at omdirigere til en login-side ved UNAUTHENTICATED-fejl eller vise en global fejlmeddelelse som en toast ved netværksfejl.

Fejllinket skal placeres før HTTP-linket i kæden, men kan kalde forward(operation) for at prøve forespørgslen igen.

cache-first (standard): returnér cachelagrede data med det samme, og hent dem igen i baggrunden, hvis de er forældede. network-only: hent altid fra serveren, og opdatér cachen. cache-and-network: returnér cachen med det samme OG hent data, og opdatér brugergrænsefladen, når svaret ankommer. cache-only: læs kun fra cachen, og udløs en fejl, hvis dataene ikke er cachelagrede. no-cache: hent altid, og skriv aldrig til cachen.

Vælg ud fra kravene til dataenes aktualitet: Oversigter bruger ofte cache-and-network, mens formularer til brugerprofiler bruger network-only.

Indstil standardværdien for fetchPolicy i InMemoryCache's defaultOptions: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Individuelle useQuery-kald kan tilsidesætte denne værdi for den enkelte forespørgsel.

En fornuftig global standard reducerer mængden af standardkode, fordi du ikke behøver at angive fetchPolicy ved hvert hook-kald.

Browserudvidelsen Apollo Client DevTools tilføjer et Apollo-panel til Chrome DevTools. Den viser alle cachelagrede forespørgsler og deres aktuelle data, lader dig udforske den normaliserede cache og giver dig mulighed for at køre forespørgsler igen fra DevTools-panelet.

Installér udvidelsen fra Chrome Web Store, og initialisér klienten med devtools: { enabled: true } (standard i udviklingstilstand).

Installér @apollo/client og graphql, opret en ApolloClient med InMemoryCache og en link-kæde, og indpak appen i ApolloProvider. Link-kæden sammensætter authLink (tilføj tokens), errorLink (global fejlhåndtering) og httpLink (HTTP-transport). Hentepolitikken styrer prioriteringen mellem cache og netværk, mens InMemoryCache normaliserer entiteter efter type og id.

Browserudvidelsen Apollo DevTools gør det enkelt at inspicere cachen og foretage fejlfinding.