React'te Apollo Client Kurulumu

@apollo/client ve graphql paketlerini yükleyin. graphql paketi, Apollo Client'ın sorgu belgelerini gql şablon etiketiyle ayrıştırabilmesi için gerektirdiği bir eş bağımlılıktır.

TypeScript projelerinde her iki paket de kendi tür tanımlarını içerir; bu nedenle @types paketlerine gerek yoktur.

ApolloClient'ı bir önbellek ve bağlantıyla örneklendirin. En basit kurulum şöyledir: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). uri kısaltması, arka planda bir HttpLink oluşturur.

Daha fazla denetim için bağlantı zincirini kendiniz oluşturun ve uri yerine link seçeneğine aktarın.

React uygulamanızı client prop'uyla ApolloProvider içine sarın: ApolloProvider client={client}. Bu işlem, Apollo Client örneğini React bağlamı aracılığıyla tüm alt bileşenlerin kullanımına sunar.

Bileşen ağacındaki her useQuery ve useMutation çağrısı, prop'ları bileşenler arasında aktarmanıza gerek kalmadan otomatik olarak bu istemciyi kullanır.

InMemoryCache, Apollo Client'ın varsayılan önbelleğidir. Getirilen verileri tür ve ID'ye göre normalleştirir ve her varlığı benzersiz bir önbellek anahtarı altında (ör. User:1) saklar. Herhangi bir sorgu User:1'i getirdiğinde, bu varlığın sonraki tüm okumaları güncel verileri alır.

Bu normalleştirme sayesinde, bir mutasyonda kullanıcıyı güncellemek, ek kod yazmadan o kullanıcıyı içeren her sorgu sonucunu otomatik olarak günceller.

HttpLink, Apollo Client'tan GraphQL sunucunuza yapılan HTTP aktarımını yönetir. Bunu uri ile, isteğe bağlı olarak da fetch, headers ve credentials ile yapılandırın.

Gelişmiş kullanım durumlarında, ayrık bağlantılar farklı işlemleri farklı uç noktalara yönlendirir: abonelikler WebSocket (WebSocketLink) üzerinden, sorgular ve mutasyonlar HTTP (HttpLink) üzerinden gönderilir.

setContext'i @apollo/client/link/context içinden içe aktarın. Bir kimlik doğrulama bağlantısı oluşturun: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Bu bağlantıyı HttpLink'in önüne ekleyin: authLink.concat(httpLink).

setContext bağlantısı her isteğin öncesinde çalışarak her işleme dinamik olarak kimlik doğrulama üstbilgileri ekler.

Bağlantıları ApolloLink.from([authLink, errorLink, httpLink]) veya authLink.concat(httpLink) kullanarak birleştirin. Bağlantılar ara yazılım görevi görür: her bağlantı işlemi işler ve next() işlevine aktarır. Zincirdeki son bağlantı, gerçek HTTP isteğini gönderir.

Yaygın zincirler şunlardır: kimlik doğrulama bağlantısı (üstbilgi ekler) + hata bağlantısı (hataları işler) + HTTP bağlantısı (isteği gönderir).

onError'ı @apollo/client/link/error içinden içe aktarın. Hata bağlantısı, GraphQL hatalarını ve ağ hatalarını genel olarak yakalar. UNAUTHENTICATED hatalarında oturum açma sayfasına yönlendirmek veya ağ hatalarında genel bir hata bildirimi göstermek için kullanın.

Hata bağlantısı zincirde HTTP bağlantısından önce yer almalıdır; ancak isteği yeniden denemek için forward(operation) çağrısını yapabilir.

cache-first (varsayılan): önbelleğe alınan verileri hemen döndürür; veriler güncel değilse arka planda yeniden getirir. network-only: her zaman sunucudan getirir ve önbelleği günceller. cache-and-network: önbelleği hemen döndürür VE verileri getirir, yanıt geldiğinde kullanıcı arayüzünü günceller. cache-only: yalnızca önbellekten okur, önbellekte yoksa hata verir. no-cache: her zaman getirir, önbelleğe hiçbir zaman yazmaz.

Veri güncelliği gereksinimlerinize göre seçim yapın: gösterge panoları genellikle cache-and-network kullanır; kullanıcı profili formları ise network-only kullanır.

Varsayılan fetchPolicy değerini InMemoryCache defaultOptions içinde ayarlayın: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Bireysel useQuery çağrıları bunu sorgu bazında geçersiz kılabilir.

Makul bir genel varsayılan belirlemek, her kanca çağrısında fetchPolicy belirtmek için gereken kalıp kod miktarını azaltır.

Apollo Client DevTools tarayıcı uzantısı, Chrome DevTools'a bir Apollo paneli ekler. Önbelleğe alınan tüm sorguları ve mevcut verilerini gösterir, normalleştirilmiş önbelleği keşfetmenizi sağlar ve sorguları DevTools panelinden yeniden çalıştırmanıza olanak tanır.

Chrome Web Store'dan yükleyin ve istemciyi devtools: { enabled: true } ile başlatın (geliştirme kipinde varsayılan olarak etkindir).

Apollo Client'ın bağlantı zincirinde errorLink, httpLink'e göre nereye yerleştirilmelidir?

@apollo/client ve graphql paketlerini yükleyin, InMemoryCache ve bağlantı zinciriyle bir ApolloClient oluşturun, uygulamayı ApolloProvider içine sarın. Bağlantı zinciri authLink'i (belirteç ekler), errorLink'i (genel hata işleme) ve httpLink'i (HTTP aktarımı) birleştirir. Veri getirme ilkesi, önbellek ile ağ arasındaki önceliği belirler; InMemoryCache varlıkları tür+id'ye göre normalleştirir.

Apollo DevTools tarayıcı uzantısı, önbelleği incelemeyi ve hata ayıklamayı kolaylaştırır.