TanStack Query ile birlikte kullanım

Görev Paylaşımı

İki kütüphane farklı işler yapar ve birbirinin yerine geçmez:¹²

Kural basit: sunucudan gelen veriyi store'a kopyalamayın. Kopya, sunucudaki veri değiştiğinde eskir; yükleme, hata ve yenileme durumlarını elle yazmak zorunda kalırsınız.² Bu derste ikisini birleştirmenin iki kalıbı var.

Store Sorguyu Sürer

Filtreler client state'tir; ürün listesi server state. Filtreyi store'da tutup query key'e koyduğunuzda, filtre değiştiği anda sorgu kendiliğinden yeniden çalışır. TkDodo iki hook'u bir custom hook'ta birleştirir:³

// src/features/products/filter-store.ts
import { create } from "zustand";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { productQueries } from "./queries";

type FilterState = {
  category: string;
  search: string;
  actions: {
    setCategory: (category: string) => void;
    setSearch: (search: string) => void;
  };
};

const useFilterStore = create<FilterState>()((set) => ({
  category: "all",
  search: "",
  actions: {
    setCategory: (category) => set({ category }),
    setSearch: (search) => set({ search }),
  },
}));

export const useCategory = () => useFilterStore((state) => state.category);
export const useSearch = () => useFilterStore((state) => state.search);
export const useFilterActions = () => useFilterStore((state) => state.actions);

export function useFilteredProducts() {
  const category = useCategory();
  const search = useSearch();
  return useQuery({
    ...productQueries.list({ category, search }),
    placeholderData: keepPreviousData,
  });
}

Filtre paneli setCategory'yi çağırır; ürün listesi useFilteredProducts'ı kullanır. İkisi birbirini tanımaz. TkDodo bunu bildirimsel ve sihirsiz bulur: addFilter arayüzün herhangi bir yerinden çağrılabilir ve sorgu otomatik tetiklenir.³ keepPreviousData filtre değişirken eski listeyi ekranda tutar (bkz. Sayfalama ve sonsuz liste).

Senkronlama Değil, Türetme

Sık görülen bir sorun: store'da seçili kullanıcının id'si duruyor, ama kullanıcı sunucudan silinmiş. İlk akla gelen, sorgu sonucu değişince store'u bir useEffect ile düzeltmektir:⁵

// ❌ Elle senkronlama
const { data: users } = useQuery(userQueries.list());
const selectedUserId = useSelectedUserId();
const { selectUser } = useUserActions();

useEffect(() => {
  if (!users?.some((u) => u.id === selectedUserId)) {
    selectUser(null);
  }
}, [users, selectedUserId, selectUser]);

TkDodo burada farklı bir soru sorar: "Kullanıcılar ve seçim şu; gerçek seçim hangisi?" Store'a dokunmadan, seçimi her render'da türetin:⁵

// ✅ Türetme
export function useSelectedUser() {
  const { data: users } = useQuery(userQueries.list());
  const selectedUserId = useSelectedUserId();

  return users?.find((u) => u.id === selectedUserId) ?? null;
}

Bunun ek faydaları var:⁵

• Ekstra render ve useEffect yok.

• Kullanıcı listeye geri eklenirse seçim kendiliğinden geri gelir; store'daki değer hiç silinmedi.

• Arayüz kararı değişirse (seçimi silmek yerine "geçersiz" göstermek) yalnızca bu hook değişir.

Bedeli: store'daki selectedUserId'ye artık doğrudan güvenemezsiniz; her yerde custom hook'u kullanmalısınız. TkDodo bunu sorun saymaz: store, arayüzde ne seçildiğinin kaydıdır; doğrulanmış son değer değil.⁵

Aynı fikir sunucudan gelen varsayılan değerler için de geçerlidir. Sorgu gelince useEffect ile ilk kaydı seçmek yerine, kullanıcı henüz bir şey seçmediyse ilk kaydı gösterin:⁵

const selection = useSelectedProductId();
const { data: products } = useQuery(productQueries.list(filters));

const activeId = selection ?? products?.[0]?.id;

Bu yaklaşım Zustand'a özel değildir; useState ya da URL state'i için de aynı şekilde çalışır.⁵ Genel ilke React dokümanında da var: hesaplanabilen bir değer için Effect yazmayın.⁶

Sepet Örneği

Sepeti store'da saklamak mantıklıdır; kullanıcının seçimidir ve sunucuda henüz yoktur. Ama stok sunucunun verisidir. Sepetteki ürünün stoğu azaldıysa uyarıyı store'u güncelleyerek değil, iki kaynağı birleştirerek gösterin:

function CartLine({ id }: { id: number }) {
  const item = useCartItem(id); // Zustand: kullanıcının seçtiği adet
  const { data: product } = useQuery(productQueries.detail(id)); // TanStack Query: güncel stok

  if (!item) return null;
  const overStock = product !== undefined && item.quantity > product.stock;

  return (
    <li>
      {item.name} × {item.quantity}
      {overStock && <p role="alert">Stokta yalnızca {product.stock} adet var.</p>}
    </li>
  );
}

Kullanıcı adedi azaltınca ya da stok sunucuda artınca uyarı kendiliğinden kaybolur.

Kendin Dene

• Ürün listesini önce kategori useState'te, sonra Zustand store'unda olacak şekilde yazın. Filtre paneli ile liste farklı component'lerdeyse hangisi daha az prop geçirir?

• Seçili kullanıcıyı useEffect ile senkronlayın, sonra türeterek yazın. Kullanıcıyı sahte API'den silip geri ekleyin; iki versiyonda seçime ne oluyor?

• Sepetteki bir ürünün stoğunu sahte API'de düşürün ve invalidateQueries çağırın. Uyarı görünüyor mu?

Detaylı Öğrenmek İçin

• Yazı: TkDodo, "Deriving Client State from Server State"; senkronlama yerine türetme ve varsayılan değerler.⁵

• Yazı: TkDodo, "Working with Zustand"; store'u useQuery ile custom hook'ta birleştirmek.³

• Resmi doküman: TanStack Query, "Does TanStack Query replace Redux, MobX or other global state managers?".²