useQuery ve useMutation Kancaları

@apollo/client içindeki gql şablon etiketi, bir GraphQL sorgu dizesini modül yüklenirken bir DocumentNode'a ayrıştırır. Sorguları bileşenlerin dışında tanımlayın: const GET_USERS = gql`query GetUsers { users { id name email } }`.

Not: Üretim kodunda, etiketli şablon olarak gql ile sarılmış tek tırnaklı dizeler kullanın. gql etiketi, JavaScript kaynak kodunda şablon değişmezi söz dizimini kabul eder.

useQuery(GET_USERS), { loading, error, data, refetch, fetchMore, networkStatus } döndürür. İlk veri getirme sırasında loading true olur. error, GraphQL veya ağ hatalarını içerir. data, sorgu biçimiyle eşleşen sorgu sonucunu içerir.

null değerler oluşturmaktan kaçınmak için data'ya erişmeden önce loading ve error durumlarını kontrol edin.

loading true iken bir iskelet bileşeni oluşturun. error tanımlıysa bir hata iletisi oluşturun (hata metni için error.message'e erişin). Gerçek içeriği yalnızca data tanımlı ve loading false olduğunda oluşturun.

Bu üç durumlu kalıp (loading / error / data), standart Apollo Client bileşen yapısıdır.

data nesnesi, GraphQL sorgusunun yapısını yansıtır. query { users { id name } } için, {id, name} nesnelerinden oluşan bir dizi olan data.users'a erişin. Tür bilgili kancalar oluşturmak için graphql-codegen kullanırsanız TypeScript türleri eşleşir.

Kod oluşturma olmadan data, any türünde olur. Kod oluşturmayla useQuery, otomatik olarak tam tür bilgisine sahip veriler döndürür.

Değişkenleri ikinci bağımsız değişken olarak aktarın: useQuery(GET_USER, { variables: { id: userId } }). userId değiştiğinde sorgu, tıpkı bir useEffect bağımlılık dizisi gibi otomatik olarak yeniden çalıştırılır.

Apollo Client, sorgu + değişkenlerin her benzersiz bileşimini ayrı olarak önbelleğe alır; bu nedenle id: "1" içeren GET_USER ile id: "2" içeren GET_USER bağımsız önbellek girdilerine sahip olur.

Sorgunun çalışmasını önlemek için seçeneklere skip: true aktarın: useQuery(GET_USER, { skip: !userId }). skip true olduğunda Apollo isteği göndermez; loading false, data ise undefined olur.

Bu, Apollo'nun SWR'deki null anahtarın ve React Query'deki enabled: false seçeneğinin karşılığıdır.

useQuery tarafından döndürülen refetch işlevi, veri getirme ilkesinden bağımsız olarak bir ağ isteğini tetikler. Sunucu verilerini değiştirmiş olabilecek bir kullanıcı eyleminden sonra, örneğin bir form gönderdikten sonra refetch() çağrısını yapın.

refetch'e yeni değişkenler aktarın: farklı parametrelerle yeniden veri getirmek için refetch({ id: newId }).

Ağ durumu değiştiğinde (veri getirme, yeniden veri getirme, yoklama vb.) güncellemeler almak için seçeneklere notifyOnNetworkStatusChange: true aktarın. networkStatus alanı, NetworkStatus numaralandırmasından alınan sayısal bir kod içerir.

Bu sayede arka planda yeniden veri getirme sürerken mevcut verileri gizlemeden göze batmayan bir "yenileniyor" göstergesi sunabilirsiniz.

useMutation(CREATE_USER), [mutateFunction, { loading, error, data, reset }] döndürür. Değişiklik işlevi, kullanıcı bir form gönderdiğinde çağrılır. { data, errors } içeren bir Promise döndürür.

Mutasyona girdi aktarmak için mutate({ variables: { name: 'Alice', email: 'alice@example.com' } }) çağrısını yapın.

useMutation seçeneklerine onCompleted: (data) => navigate('/dashboard') ve onError: (error) => showToast(error.message) aktarın. Bu geri çağırmalar, mutasyon başarıyla sonuçlandıktan veya reddedildikten sonra çalışır.

onCompleted, mutasyon sonucundaki verileri alır; bu veriler yönlendirmeyi tetiklemek, başarı iletilerini görüntülemek veya formları sıfırlamak için kullanılabilir.

Mutasyon çağrısındaki optimisticResponse seçeneği, sunucu yanıt vermeden önce yapay bir sonucu hemen önbelleğe yazar. Apollo, iyimser verileri anında oluşturur ve yanıt geldiğinde bunları gerçek sunucu yanıtıyla değiştirir.

Mutasyon başarısız olursa Apollo, iyimser işlem öncesindeki önbellek durumuna otomatik olarak geri döner ve kullanıcı arayüzünü tutarlı tutar.

skip: true aktarıldığında useQuery'ye ne olur?

Sorguları gql etiketiyle tanımlayın, useQuery(QUERY, { variables, skip }) çağrısını yapın ve loading/error/data durumlarını yönetin. useMutation bir tetikleme işlevi ile durum nesnesi döndürür; bu işlevi değişkenlerle çağırın ve sonuçları onCompleted ve onError aracılığıyla yönetin. İyimser yanıtlar, başarısızlık durumunda otomatik geri alma ile önbelleği hemen günceller.

skip seçeneği ve değişkenlerle yönlendirilen yeniden veri getirme, koşullu ve parametreli veri yüklemeyi yönetir.