Konfigurera Apollo Client i React

Installera @apollo/client och graphql. Paketet graphql är ett peer-beroende som Apollo Client behöver för att tolka frågedokument med gql-template-taggen.

I TypeScript-projekt innehåller båda paketen sina egna typdefinitioner, så inga @types-paket behövs.

Skapa en instans av ApolloClient med en cache och en link. Den enklaste konfigurationen är: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). Kortformen uri skapar internt en HttpLink.

Om större kontroll behövs kan link-kedjan byggas manuellt och skickas till alternativet link i stället för uri.

Omslut React-applikationen med ApolloProvider och ange propen client: ApolloProvider client={client}. Då blir Apollo Client-instansen tillgänglig för alla underordnade komponenter via React context.

Alla anrop till useQuery och useMutation i komponentträdet använder automatiskt denna klient utan att props behöver skickas genom flera komponentnivåer.

InMemoryCache är Apollo Clients standardcache. Hämtade data normaliseras efter typ och ID, och varje entitet lagras under en unik cache-nyckel (till exempel User:1). När en query hämtar User:1 får alla efterföljande läsningar av entiteten de uppdaterade uppgifterna.

Den här normaliseringen innebär att en uppdatering av en användare i en mutation automatiskt uppdaterar alla query-resultat som innehåller användaren, utan ytterligare kod.

HttpLink hanterar HTTP-transporten mellan Apollo Client och GraphQL-servern. Konfigurera den med uri och vid behov även fetch, headers och credentials.

För avancerade användningsfall kan split links dirigera olika operationer till olika endpoints: subscriptions går via WebSocket (WebSocketLink), medan queries och mutationer går via HTTP (HttpLink).

Importera setContext från @apollo/client/link/context. Skapa en auth-link: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Kedja den före HttpLink: authLink.concat(httpLink).

setContext-länken körs före varje förfrågan och lägger dynamiskt till autentiseringsrubriker i varje operation.

Sätt samman links med ApolloLink.from([authLink, errorLink, httpLink]) eller authLink.concat(httpLink). Links fungerar som middleware: varje link bearbetar operationen och skickar den vidare till next(). Den sista länken i kedjan skickar den faktiska HTTP-förfrågan.

Vanliga kedjor är auth link (lägger till rubriker) + error link (hanterar fel) + HTTP link (skickar förfrågan).

Importera onError från @apollo/client/link/error. Fel-länken fångar upp GraphQL-fel och nätverksfel globalt. Använd den för att omdirigera till en inloggningssida vid UNAUTHENTICATED-fel eller visa ett globalt felmeddelande vid nätverksfel.

Fel-länken måste placeras före HTTP-länken i kedjan, men kan anropa forward(operation) för att försöka skicka förfrågan igen.

cache-first (default): returnera cachad data direkt och hämta om i bakgrunden om den är inaktuell. network-only: hämta alltid från servern och uppdatera cachen. cache-and-network: returnera cachen direkt OCH hämta data, och uppdatera gränssnittet när svaret kommer. cache-only: läs endast från cachen och kasta ett fel om data inte finns i cachen. no-cache: hämta alltid data och skriv aldrig till cachen.

Välj utifrån kraven på datans aktualitet: dashboards använder ofta cache-and-network, medan formulär för användarprofiler använder network-only.

Ange standardvärdet för fetchPolicy i InMemoryCache:s defaultOptions: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Enskilda useQuery-anrop kan åsidosätta detta för respektive query.

Ett genomtänkt globalt standardvärde minskar mängden upprepande kod där fetchPolicy annars måste anges vid varje hook-anrop.

Webbläsartillägget Apollo Client DevTools lägger till en Apollo-panel i Chrome DevTools. Det visar alla cachade queries och deras aktuella data, låter er utforska den normaliserade cachen och gör det möjligt att köra queries igen från DevTools-panelen.

Installera tillägget från Chrome Web Store och initiera klienten med devtools: { enabled: true } (standard i utvecklingsläge).

Installera @apollo/client och graphql, skapa en ApolloClient med InMemoryCache och en link-kedja, och omslut appen med ApolloProvider. Link-kedjan sätter samman authLink (lägger till tokens), errorLink (global felhantering) och httpLink (HTTP-transport). Fetch policy styr prioriteringen mellan cache och nätverk, medan InMemoryCache normaliserar entiteter efter typ+id.

Webbläsartillägget Apollo DevTools gör det enkelt att inspektera cachen och felsöka.