Bağımlı ve paralel sorgular

Paralel Sorgular

Aynı component'te yan yana yazılan useQuery'ler kendiliğinden paralel çalışır; ek bir şey yapmanız gerekmez:¹

function ProductPage({ id }: { id: number }) {
  const product = useQuery(productQueries.detail(id));
  const reviews = useQuery(reviewQueries.list(id));
  // iki istek aynı anda başlar
}

Sorgu sayısı render'dan render'a değişiyorsa döngüde useQuery çağıramazsınız; hook kuralları buna izin vermez. Bunun için useQueries var:¹

function CartSummary({ productIds }: { productIds: number[] }) {
  const total = useQueries({
    queries: productIds.map((id) => productQueries.detail(id)),
    combine: (results) => ({
      price: results.reduce((sum, result) => sum + (result.data?.price ?? 0), 0),
      isPending: results.some((result) => result.isPending),
    }),
  });

  if (total.isPending) return <p>Hesaplanıyor...</p>;
  return <p>Toplam: {total.price} TL</p>;
}

combine sonuç dizisini tek bir değere çevirir. Sonuç structural sharing ile korunur; değer değişmedikçe referansı da değişmez.² queryOptions kullanırsanız useQueries içindeki tip çıkarımı da korunur.¹

Bağımlı Sorgular

İkinci sorgu birincinin sonucuna ihtiyaç duyuyorsa enabled ile bekletin:³

const { data: user } = useQuery(userQueries.me());

const { data: orders, isLoading } = useQuery({
  ...orderQueries.list(user?.id ?? 0),
  enabled: !!user?.id,
});

enabled: false olan bir sorgu status: 'pending' ve fetchStatus: 'idle' durumunda bekler. Bu yüzden isPending burada yükleme göstermek için uygun değildir; istek başlamadan da true'dur. İlk istek gerçekten sürerken true olan isLoading'i kullanın.³⁴

TypeScript kullanıyorsanız skipToken aynı işi tip güvenli yapar. enabled ile user?.id ?? 0 gibi sahte bir değer yazmak zorunda kalmazsınız:⁴

import { skipToken, useQuery } from "@tanstack/react-query";

const { data: orders } = useQuery({
  queryKey: ["orders", user?.id],
  queryFn: user ? () => fetchOrders(user.id) : skipToken,
});

enabled'ı bir filtre formunda da kullanabilirsiniz: kullanıcı filtreyi uygulayana kadar sorgu çalışmaz, uyguladığı anda anahtar ve enabled birlikte değişir.⁴ TkDodo enabled'ı kütüphanenin en güçlü seçeneklerinden biri sayar.⁵

İstek Şelalesi

Bir isteğin başlaması için başka bir isteğin bitmesini beklemek şelale (request waterfall) oluşturur. Doküman bunu, bileşen içinde veri çeken kütüphanelerdeki en büyük performans tuzağı olarak tanımlar.⁶ Üç tipik kaynak:⁶

İç içe şelale sinsidir: alt component'in kendi sorgusu, üst component kendi verisini bekleyip alt component'i render ettiğinde başlar. Comments için gereken id zaten Article'da varsa iki sorgu aynı anda başlatılabilir.⁶ Hepsini düzeltmek zorunda değilsiniz; ara sıra Network sekmesine bakıp fark etmek yeter.⁶

Event Handler'da Prefetch

Kullanıcı bir ürünün üzerine geldiğinde detayını önceden yükleyebilirsiniz. Tıkladığında veri cache'te hazırdır. v5.102 ile prefetchQuery ve ensureQueryData kullanımdan kaldırıldı; yerine queryClient.query var:⁷⁸

import { noop, useQueryClient } from "@tanstack/react-query";

function ProductLink({ id, children }: { id: number; children: React.ReactNode }) {
  const queryClient = useQueryClient();

  const prefetch = () => {
    void queryClient.query(productQueries.detail(id)).catch(noop);
  };

  return (
    <a href={`/products/${id}`} onMouseEnter={prefetch} onFocus={prefetch}>
      {children}
    </a>
  );
}

query veriyi getirir, cache'e yazar ve sonucu döndürür; hata olursa fırlatır. Prefetch'te sonuca ihtiyaç olmadığı için Promise void ile bırakılır ve hata noop ile yutulur; asıl useQuery hatayı zaten yeniden dener.⁷ Veri staleTime'dan tazeyse istek atılmaz. Bu yüzden prefetch edilen sorguya bir staleTime vermek önemlidir; yoksa her fare hareketinde istek gider.⁷

Kendin Dene

• Ürün ve yorum sorgularını aynı component'te yazın, Network sekmesinde aynı anda başladıklarını görün. Yorumları bir alt component'e taşıyıp ürün yüklenince render edin; şelaleyi görüyor musunuz?

• Sepetteki ürün id'lerinden useQueries ve combine ile toplam fiyat hesaplayın.

• Bağımlı sorguyu önce enabled ile, sonra skipToken ile yazın. Tiplerdeki farka bakın.

• Ürün linklerine hover prefetch ekleyin, staleTime'ı kaldırıp fareyi linklerde gezdirin.

Detaylı Öğrenmek İçin

• Resmi doküman: "Performance & Request Waterfalls"; şelale türleri, code splitting ve Server Component'lerin rolü.⁶

• Resmi doküman: "Prefetching & Router Integration"; event handler, component ve router düzeyinde prefetch.⁷

• Yazı: TkDodo, "Seeding the Query Cache"; Suspense şelaleleri ve cache'i önceden doldurmak.⁹