Modern web uygulamalar\u0131nda veri y\u00f6netimi ve API \u00e7a\u011fr\u0131lar\u0131, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik unsurlard\u0131r. React Query, bu karma\u015f\u0131k s\u00fcreci basitle\u015ftirerek performansl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirmemizi sa\u011flayan g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir. Bu g\u00fcc\u00fcn merkezinde ise t\u00fcm veri ak\u0131\u015f\u0131n\u0131, \u00f6nbelleklemeyi ve senkronizasyonu y\u00f6neten React uygulaman\u0131zda <\/code> <\/code> \u00c7o\u011fu durumda tek bir <\/code> React Query'nin temelinde, HTTP cache'inden esinlenilmi\u015f \"stale-while-revalidate\" prensibi yatar. Bu prensip, kullan\u0131c\u0131lara an\u0131nda \u00f6nbelle\u011fe al\u0131nm\u0131\u015f (stale) veriyi g\u00f6sterirken, arka planda bu veriyi g\u00fcncelleyerek taze verinin haz\u0131r olmas\u0131n\u0131 sa\u011flar. Bu sayede kullan\u0131c\u0131lar asla bo\u015f bir ekranla kar\u015f\u0131la\u015fmaz ve uygulaman\u0131z her zaman h\u0131zl\u0131 hissettirir.<\/p>\n Bu iki ayar\u0131n do\u011fru kombinasyonu, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve bellek kullan\u0131m\u0131n\u0131 optimize etmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n Bu metot, belirli bir sorgu anahtar\u0131na (veya anahtar desenine) uyan t\u00fcm sorgular\u0131 \"stale\" olarak i\u015faretler ve aktif olanlar\u0131 yeniden getirir. Genellikle bir mutasyon (veri g\u00fcncelleme, silme, olu\u015fturma) ba\u015far\u0131l\u0131 oldu\u011funda, ilgili sorgular\u0131n \u00f6nbelle\u011fini ge\u00e7ersiz k\u0131lmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n <\/code> <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n Bu iki ayar aras\u0131ndaki dengeyi bulmak \u00e7ok \u00f6nemlidir: <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n Uygulaman\u0131zda s\u0131k\u00e7a kullan\u0131lan belirli <\/code><\/p>\n Evet, m\u00fcmk\u00fcnd\u00fcr. React Query, hem SSR (Server-Side Rendering) hem de RSC (React Server Components) ile uyumludur. SSR ortam\u0131nda, sunucuda bir QueryClient<\/code> yer al\u0131r. Bu makalede, QueryClient<\/code>‘\u0131n derinliklerine inerek, onun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve React Query uygulamalar\u0131n\u0131zda ondan en iyi \u015fekilde nas\u0131l faydalanabilece\u011finizi kapsaml\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nQueryClient Nedir ve Neden \u00d6nemlidir?<\/h3>\n
QueryClient<\/code>, React Query ekosisteminin kalbi ve beynidir. Uygulaman\u0131zdaki t\u00fcm sorgular\u0131n (queries), mutasyonlar\u0131n (mutations) ve \u00f6nbelleklenen verilerin y\u00f6netiminden sorumlu merkezi bir depodur. Geli\u015ftiricilerin manuel olarak yapmas\u0131 gereken veri getirme, \u00f6nbellekleme, senkronizasyon, hata y\u00f6netimi ve arka plan g\u00fcncellemeleri gibi bir\u00e7ok karma\u015f\u0131k g\u00f6revi otomatikle\u015ftirir. Bu sayede, uygulaman\u0131z\u0131n veri katman\u0131n\u0131 d\u00fc\u015f\u00fcnmek yerine, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcze odaklanabilirsiniz.<\/p>\nReact Query Mimarisi \u0130\u00e7indeki Yeri<\/h4>\n
QueryClient<\/code>, uygulaman\u0131z\u0131n k\u00f6k bile\u015fenine yak\u0131n bir yerde QueryClientProvider<\/code> arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r. Bu sa\u011flay\u0131c\u0131, React ba\u011flam (context) mekanizmas\u0131n\u0131 kullanarak QueryClient<\/code> \u00f6rne\u011fini t\u00fcm alt bile\u015fenlere eri\u015filebilir k\u0131lar. B\u00f6ylece, useQuery<\/code>, useMutation<\/code> gibi hook’lar bu merkezi istemci \u00fczerinden verilere eri\u015febilir, g\u00fcncelleyebilir ve \u00f6nbellekleme politikalar\u0131n\u0131 uygulayabilir.<\/p>\nMerkezi Veri Y\u00f6netimi Rol\u00fc<\/h4>\n
QueryClient<\/code>, uygulaman\u0131z\u0131n veri durumunu tek bir yerde tutar. Bu, farkl\u0131 bile\u015fenlerin ayn\u0131 veriye tutarl\u0131 bir \u015fekilde eri\u015fmesini sa\u011flar. Bir veri g\u00fcncellendi\u011finde, QueryClient<\/code> otomatik olarak bu veriyi kullanan t\u00fcm bile\u015fenleri yeniden render etmeden g\u00fcnceller. Bu merkezi y\u00f6netim, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda veri tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flaman\u0131n ve hatalar\u0131 azaltman\u0131n anahtar\u0131d\u0131r.<\/p>\nGeli\u015ftirici Deneyimine Katk\u0131lar\u0131<\/h4>\n
QueryClient<\/code>‘\u0131n sa\u011flad\u0131\u011f\u0131 otomasyon, geli\u015ftiricilerin hayat\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. Manuel \u00f6nbellekleme mant\u0131\u011f\u0131 yazmaktan, race condition’larla u\u011fra\u015fmaktan veya stale verilerle ba\u015fa \u00e7\u0131kmaktan kurtulursunuz. Deklaratif API’si sayesinde, veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek sezgisel ve hatas\u0131z hale gelir. Bu da daha h\u0131zl\u0131 geli\u015ftirme s\u00fcre\u00e7leri ve daha az hata anlam\u0131na gelir.<\/p>\nQueryClient Kurulumu ve Yap\u0131land\u0131rmas\u0131<\/h3>\n
QueryClient<\/code>‘\u0131 kullanmaya ba\u015flamak olduk\u00e7a basittir, ancak uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na g\u00f6re \u00f6zelle\u015ftirmek, performans ve esneklik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\nTemel Kurulum Ad\u0131mlar\u0131 (
QueryClientProvider<\/code>)<\/h4>\nQueryClient<\/code>‘\u0131 kullanmak i\u00e7in \u00f6ncelikle bir QueryClient<\/code> \u00f6rne\u011fi olu\u015fturmal\u0131 ve bunu QueryClientProvider<\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla uygulaman\u0131z\u0131n k\u00f6k\u00fcne sa\u011flamal\u0131s\u0131n\u0131z.<\/p>\n\/\/ App.jsx veya index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport {\n QueryClient,\n QueryClientProvider,\n} from '@tanstack\/react-query';\nimport App from '.\/App';\n\n\/\/ Yeni bir QueryClient \u00f6rne\u011fi olu\u015fturun\nconst queryClient = new QueryClient();\n\nReactDOM.createRoot(document.getElementById('root')).render(\n
\nBu kurulum, uygulaman\u0131zdaki t\u00fcm React Query hook'lar\u0131n\u0131n bu queryClient<\/code> \u00f6rne\u011fine eri\u015fmesini sa\u011flar.<\/p>\nVarsay\u0131lan Ayarlar\u0131n \u00d6zelle\u015ftirilmesi (defaultOptions)<\/h4>\n
QueryClient<\/code> olu\u015ftururken, t\u00fcm sorgular ve mutasyonlar i\u00e7in ge\u00e7erli olacak varsay\u0131lan ayarlar\u0131 defaultOptions<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla belirleyebilirsiniz. Bu, uygulaman\u0131z genelinde tutarl\u0131 bir davran\u0131\u015f sa\u011flamak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: 1000 * 60 * 5, \/\/ 5 dakika sonra veriyi \"stale\" olarak i\u015faretle\n cacheTime: 1000 * 60 * 10, \/\/ 10 dakika sonra kullan\u0131lmayan veriyi cache'ten sil\n refetchOnWindowFocus: false, \/\/ Pencereye odaklan\u0131ld\u0131\u011f\u0131nda otomatik refetch yapma\n retry: 3, \/\/ Hata durumunda 3 kez yeniden dene\n },\n mutations: {\n \/\/ Mutasyonlar i\u00e7in varsay\u0131lan ayarlar buraya eklenebilir\n },\n },\n});<\/pre>\n
\nBu ayarlar, her bir useQuery<\/code> veya useMutation<\/code> \u00e7a\u011fr\u0131s\u0131nda ayr\u0131 ayr\u0131 belirtmek yerine, global olarak uygulan\u0131r. Ancak, her bir hook i\u00e7inde bu ayarlar\u0131 ge\u00e7ersiz k\u0131lmak da m\u00fcmk\u00fcnd\u00fcr.<\/p>\nBirden Fazla QueryClient Kullan\u0131m\u0131<\/h4>\n
QueryClient<\/code> yeterli olsa da, baz\u0131 geli\u015fmi\u015f senaryolarda birden fazla QueryClient<\/code> kullanmak isteyebilirsiniz. \u00d6rne\u011fin, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri tamamen farkl\u0131 \u00f6nbellekleme politikalar\u0131 veya veri kaynaklar\u0131 gerektiriyorsa. Bu durumda, farkl\u0131 QueryClientProvider<\/code>'lar\u0131 farkl\u0131 client<\/code> prop'lar\u0131yla sarmalayarak bunu ba\u015farabilirsiniz.<\/p>\n\/\/ App.jsx\nfunction App() {\n const adminQueryClient = new QueryClient({ \/* admin options *\/ });\n const publicQueryClient = new QueryClient({ \/* public options *\/ });\n\n return (\n <>\n
\nBu yakla\u015f\u0131m, her bir QueryClient<\/code>'\u0131n kendi izole \u00f6nbellek ve yap\u0131land\u0131rma setine sahip olmas\u0131n\u0131 sa\u011flar.<\/p>\nVeri Y\u00f6netimi ve Cache Mekanizmalar\u0131<\/h3>\n
QueryClient<\/code>'\u0131n en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, geli\u015fmi\u015f \u00f6nbellekleme ve veri y\u00f6netimi mekanizmalar\u0131d\u0131r. Bu mekanizmalar, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve yan\u0131t h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\nQuery Cache ve Yap\u0131s\u0131<\/h4>\n
QueryClient<\/code>, t\u00fcm sorgu verilerini Query Cache<\/code> ad\u0131 verilen dahili bir yap\u0131da saklar. Her sorgu, benzersiz bir anahtar (query key) ile tan\u0131mlan\u0131r ve bu anahtar alt\u0131nda ilgili veriler, meta veriler (stale durumu, son g\u00fcncelleme zaman\u0131 vb.) depolan\u0131r. Bir sorgu anahtar\u0131, genellikle bir dizi olarak tan\u0131mlan\u0131r ve sorgunun parametrelerini i\u00e7erebilir: ['todos', { status: 'active' }]<\/code>.<\/p>\nStale-While-Revalidate Prensibi<\/h4>\n
Cache S\u00fcreleri (staleTime, cacheTime)<\/h4>\n
staleTime<\/code> ve cacheTime<\/code>, React Query'nin \u00f6nbellekleme davran\u0131\u015f\u0131n\u0131 kontrol eden iki \u00f6nemli ayard\u0131r:
\n* staleTime<\/code><\/strong>: Bir sorgunun ne kadar s\u00fcre \"taze\" (fresh) kalaca\u011f\u0131n\u0131 belirler. Bu s\u00fcre boyunca, sorgu verisi \u00f6nbellekten do\u011frudan d\u00f6nd\u00fcr\u00fcl\u00fcr ve arka planda herhangi bir yeniden getirme (refetch) tetiklenmez. staleTime<\/code> s\u00fcresi doldu\u011funda, veri \"stale\" (bayat) hale gelir. Bir sorgu \"stale\" oldu\u011funda ve yeniden render edildi\u011finde veya ba\u015fka bir olay (pencereye odaklanma gibi) tetiklendi\u011finde, React Query arka planda veriyi yeniden getirmeye \u00e7al\u0131\u015f\u0131r. Varsay\u0131lan olarak 0<\/code>'d\u0131r, yani veri hemen \"stale\" olur.
\n* cacheTime<\/code><\/strong>: Bir sorgunun \u00f6nbellekte ne kadar s\u00fcre saklanaca\u011f\u0131n\u0131 belirler. Bir sorgu art\u0131k aktif olarak kullan\u0131lmad\u0131\u011f\u0131nda (yani, ilgili t\u00fcm useQuery<\/code> hook'lar\u0131 unmount oldu\u011funda), cacheTime<\/code> geri saymaya ba\u015flar. Bu s\u00fcre sonunda, veri \u00f6nbellekten tamamen silinir (garbage collection). Varsay\u0131lan olarak 5<\/code> dakikad\u0131r.<\/p>\nQueryClient ile Etkile\u015fim: Metotlar ve Kullan\u0131m Senaryolar\u0131<\/h3>\n
QueryClient<\/code> \u00f6rne\u011fi, \u00f6nbelle\u011fi do\u011frudan manip\u00fcle etmek ve sorgularla etkile\u015fim kurmak i\u00e7in \u00e7e\u015fitli g\u00fc\u00e7l\u00fc metotlar sunar. Bu metotlar, React Query'nin deklaratif do\u011fas\u0131n\u0131 tamamlayarak karma\u015f\u0131k senaryolarda esneklik sa\u011flar.<\/p>\nqueryClient.invalidateQueries()<\/code>: Veriyi Ge\u00e7ersiz K\u0131lma<\/h4>\n\/\/ Bir \u00fcr\u00fcn g\u00fcncellendikten sonra, t\u00fcm \u00fcr\u00fcnler listesini ve ilgili \u00fcr\u00fcn detay\u0131n\u0131 ge\u00e7ersiz k\u0131l\nconst mutation = useMutation({\n mutationFn: updateProduct,\n onSuccess: () => {\n queryClient.invalidateQueries({ queryKey: ['products'] }); \/\/ T\u00fcm \u00fcr\u00fcnleri ge\u00e7ersiz k\u0131l\n queryClient.invalidateQueries({ queryKey: ['product', productId] }); \/\/ Belirli \u00fcr\u00fcn\u00fc ge\u00e7ersiz k\u0131l\n },\n});<\/pre>\n
\nBu, kullan\u0131c\u0131ya her zaman en g\u00fcncel veriyi sunman\u0131n en yayg\u0131n ve etkili yoludur.<\/p>\nqueryClient.setQueryData()<\/code>: Cache'i Do\u011frudan G\u00fcncelleme<\/h4>\nsetQueryData<\/code>, bir sorgunun \u00f6nbelle\u011fini do\u011frudan, API \u00e7a\u011fr\u0131s\u0131 yapmadan g\u00fcncellemenizi sa\u011flar. Bu, \u00f6zellikle mutasyonlar sonras\u0131 iyimser g\u00fcncellemeler (optimistic updates) yapmak veya sunucudan d\u00f6nen yeni veriyi manuel olarak \u00f6nbelle\u011fe yazmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\/\/ Bir \"todo\" \u00f6\u011fesini tamamlad\u0131ktan sonra, listeyi API \u00e7a\u011fr\u0131s\u0131 yapmadan g\u00fcncelle\nconst mutation = useMutation({\n mutationFn: completeTodo,\n onMutate: async (newTodo) => {\n \/\/ \u0130yimser g\u00fcncelleme i\u00e7in mevcut sorguyu iptal et\n await queryClient.cancelQueries({ queryKey: ['todos'] });\n\n \/\/ Mevcut veriyi al\n const previousTodos = queryClient.getQueryData(['todos']);\n\n \/\/ Cache'i iyimser bir \u015fekilde g\u00fcncelle\n queryClient.setQueryData(['todos'], old =>\n old ? old.map(todo => (todo.id === newTodo.id ? { ...todo, completed: true } : todo)) : []\n );\n\n return { previousTodos }; \/\/ Hata durumunda geri almak i\u00e7in\n },\n onError: (err, newTodo, context) => {\n \/\/ Hata durumunda cache'i eski haline getir\n queryClient.setQueryData(['todos'], context.previousTodos);\n },\n onSettled: () => {\n \/\/ Mutasyon tamamland\u0131\u011f\u0131nda (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z), veriyi yeniden getir\n queryClient.invalidateQueries({ queryKey: ['todos'] });\n },\n});<\/pre>\nqueryClient.getQueryData()<\/code>: Cache'ten Veri Okuma<\/h4>\ngetQueryData<\/code>, belirli bir sorgu anahtar\u0131na ait veriyi \u00f6nbellekten senkronize olarak okuman\u0131z\u0131 sa\u011flar. Bu metot, genellikle setQueryData<\/code> ile birlikte iyimser g\u00fcncellemeler yaparken veya uygulaman\u0131z\u0131n ba\u015fka bir yerinde \u00f6nbellekteki veriye eri\u015fmeniz gerekti\u011finde kullan\u0131l\u0131r.<\/p>\nconst todos = queryClient.getQueryData(['todos']);\nif (todos) {\n console.log(\"\u00d6nbellekteki todos:\", todos);\n}<\/pre>\nqueryClient.prefetchQuery()<\/code>: Veri \u00d6nceden Y\u00fckleme<\/h4>\nprefetchQuery<\/code>, bir sorguyu kullan\u0131c\u0131ya g\u00f6sterilmeden \u00f6nce arka planda \u00f6nbelle\u011fe y\u00fcklemek i\u00e7in kullan\u0131l\u0131r. Bu, kullan\u0131c\u0131 bir sayfaya veya bile\u015fene t\u0131klad\u0131\u011f\u0131nda verinin zaten haz\u0131r olmas\u0131n\u0131 sa\u011flayarak y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n\/\/ Bir linkin \u00fczerine gelindi\u011finde (hover), ilgili sayfan\u0131n verisini \u00f6nceden y\u00fckle\nconst handleMouseEnter = () => {\n queryClient.prefetchQuery({\n queryKey: ['post', 1],\n queryFn: () => fetch('\/api\/posts\/1').then(res => res.json()),\n });\n};\n\n\n Post 1'e Git\n<\/Link><\/pre>\nOptimizasyon ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n
QueryClient<\/code>'\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rmak ve kullanmak, React uygulaman\u0131z\u0131n performans\u0131n\u0131 maksimize etmenin anahtar\u0131d\u0131r.<\/p>\nstaleTime<\/code> ve cacheTime<\/code> Ayarlar\u0131n\u0131n Do\u011fru Kullan\u0131m\u0131<\/h4>\n
\n* Y\u00fcksek staleTime<\/code><\/strong>: Nadiren de\u011fi\u015fen veriler i\u00e7in (\u00f6rne\u011fin, statik konfig\u00fcrasyonlar, kullan\u0131c\u0131 profili bilgileri) y\u00fcksek staleTime<\/code> ayarlamak, gereksiz API \u00e7a\u011fr\u0131lar\u0131n\u0131 \u00f6nler ve performans\u0131 art\u0131r\u0131r.
\n* D\u00fc\u015f\u00fck staleTime<\/code><\/strong>: S\u0131k s\u0131k de\u011fi\u015fen veriler i\u00e7in (\u00f6rne\u011fin, sohbet mesajlar\u0131, borsa verileri) d\u00fc\u015f\u00fck staleTime<\/code> veya varsay\u0131lan 0<\/code> kullanmak, kullan\u0131c\u0131ya her zaman en g\u00fcncel veriyi sunmay\u0131 garantiler.
\n* Y\u00fcksek cacheTime<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n s\u0131k s\u0131k ziyaret etti\u011fi ancak aktif olarak kullan\u0131lmayan sayfalar\u0131n verilerini \u00f6nbellekte tutmak i\u00e7in y\u00fcksek cacheTime<\/code> kullanabilirsiniz.
\n* D\u00fc\u015f\u00fck cacheTime<\/code><\/strong>: Bellek kullan\u0131m\u0131n\u0131 azaltmak i\u00e7in nadiren eri\u015filen veya \u00e7ok b\u00fcy\u00fck veriler i\u00e7in d\u00fc\u015f\u00fck cacheTime<\/code> ayarlayabilirsiniz.<\/p>\nGarbage Collection ve Bellek Y\u00f6netimi<\/h4>\n
cacheTime<\/code> ayar\u0131, QueryClient<\/code>'\u0131n dahili \u00e7\u00f6p toplama (garbage collection) mekanizmas\u0131n\u0131 tetikler. Bir sorgu cacheTime<\/code> s\u00fcresi boyunca kullan\u0131lmazsa, \u00f6nbellekten silinir. Bu, \u00f6zellikle mobil cihazlarda veya \u00e7ok say\u0131da farkl\u0131 veri sorgusu olan uygulamalarda bellek ayak izini y\u00f6netmek i\u00e7in \u00f6nemlidir. Kullan\u0131lmayan verilerin \u00f6nbellekte s\u00fcresiz kalmas\u0131n\u0131 engeller.<\/p>\nselect<\/code> Fonksiyonu ile Veri D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/h4>\nuseQuery<\/code> hook'unun select<\/code> se\u00e7ene\u011fi, sorgudan d\u00f6nen veriyi do\u011frudan QueryClient<\/code>'\u0131n \u00f6nbelle\u011fine yaz\u0131lmadan \u00f6nce d\u00f6n\u00fc\u015ft\u00fcrmenize olanak tan\u0131r. Bu, gereksiz yeniden render'lar\u0131 \u00f6nleyerek performans\u0131 art\u0131rabilir, \u00e7\u00fcnk\u00fc sadece d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f veri de\u011fi\u015fti\u011finde bile\u015fen yeniden render edilir.<\/p>\nconst { data: userNames } = useQuery({\n queryKey: ['users'],\n queryFn: fetchUsers,\n select: (users) => users.map(user => user.name), \/\/ Sadece isimleri al\n});\n\/\/ userNames sadece isimlerden olu\u015fan bir dizi olacakt\u0131r.<\/pre>\nQueryClient'\u0131n Geli\u015fmi\u015f Kullan\u0131m Alanlar\u0131<\/h3>\n
QueryClient<\/code>'\u0131n temel yeteneklerinin \u00f6tesinde, daha karma\u015f\u0131k ve g\u00fc\u00e7l\u00fc kullan\u0131m senaryolar\u0131 da mevcuttur.<\/p>\nMutasyon Sonras\u0131 Cache G\u00fcncelleme (onSuccess, onError)<\/h4>\n
useMutation<\/code> hook'unun onSuccess<\/code> ve onError<\/code> callback'leri, bir mutasyon tamamland\u0131ktan sonra QueryClient<\/code> metotlar\u0131n\u0131 kullanarak \u00f6nbelle\u011fi ak\u0131ll\u0131ca g\u00fcncellemek i\u00e7in ideal yerlerdir. onSuccess<\/code> i\u00e7inde invalidateQueries<\/code> veya setQueryData<\/code> kullanarak, sunucudan d\u00f6nen yeni veriye g\u00f6re \u00f6nbelle\u011fi g\u00fcncelleyebiliriz. onError<\/code> i\u00e7inde ise iyimser g\u00fcncellemeleri geri almak i\u00e7in setQueryData<\/code> kullan\u0131labilir.<\/p>\nconst mutation = useMutation({\n mutationFn: addTodo,\n onSuccess: (newTodo) => {\n \/\/ Yeni eklenen todo'yu do\u011frudan cache'e ekleyebiliriz\n queryClient.setQueryData(['todos'], (oldTodos) => [...oldTodos, newTodo]);\n \/\/ Veya sadece 'todos' sorgusunu ge\u00e7ersiz k\u0131larak yeniden getirmesini sa\u011flayabiliriz\n \/\/ queryClient.invalidateQueries({ queryKey: ['todos'] });\n },\n onError: (error, variables, context) => {\n \/\/ Hata durumunda iyimser g\u00fcncellemeyi geri al\n \/\/ context i\u00e7inde onMutate'ten d\u00f6nen veriler olabilir\n },\n});<\/pre>\nOffline Senaryolar ve Retry Mekanizmalar\u0131<\/h4>\n
QueryClient<\/code>, a\u011f ba\u011flant\u0131s\u0131 kesildi\u011finde sorgular\u0131 otomatik olarak yeniden denemek i\u00e7in dahili bir retry<\/code> mekanizmas\u0131na sahiptir. defaultOptions<\/code> i\u00e7inde veya her bir useQuery<\/code> \u00e7a\u011fr\u0131s\u0131nda retry<\/code> say\u0131s\u0131n\u0131 ve retryDelay<\/code>'i yap\u0131land\u0131rabilirsiniz. Bu, uygulaman\u0131z\u0131n \u00e7evrimd\u0131\u015f\u0131 durumdan \u00e7evrimi\u00e7i duruma ge\u00e7ti\u011finde otomatik olarak kendini iyile\u015ftirmesine yard\u0131mc\u0131 olur.<\/p>\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n retry: 5, \/\/ 5 kez yeniden dene\n retryDelay: attemptIndex => Math.min(1000 * (2 ** attemptIndex), 30000), \/\/ \u00dcstel geri \u00e7ekilme\n },\n },\n});<\/pre>\nCustom QueryClient Hook'lar\u0131<\/h4>\n
QueryClient<\/code> etkile\u015fimleri varsa, bunlar\u0131 kendi \u00f6zel hook'lar\u0131n\u0131z (custom hooks) i\u00e7ine kaps\u00fclleyebilirsiniz. Bu, kod tekrar\u0131n\u0131 azalt\u0131r, okunabilirli\u011fi art\u0131r\u0131r ve i\u015f mant\u0131\u011f\u0131n\u0131 bile\u015fenlerden ay\u0131r\u0131r.<\/p>\n\/\/ useInvalidateTodos.js\nimport { useQueryClient } from '@tanstack\/react-query';\n\nexport function useInvalidateTodos() {\n const queryClient = useQueryClient();\n return () => queryClient.invalidateQueries({ queryKey: ['todos'] });\n}\n\n\/\/ Bir bile\u015fende kullan\u0131m\u0131\nimport { useInvalidateTodos } from '.\/useInvalidateTodos';\n\nfunction TodoList() {\n const invalidateTodos = useInvalidateTodos();\n\n const mutation = useMutation({\n mutationFn: deleteTodo,\n onSuccess: () => {\n invalidateTodos(); \/\/ Kendi hook'umuzu kullan\u0131yoruz\n },\n });\n\n \/\/ ...\n}<\/pre>\nSonu\u00e7<\/h3>\n
QueryClient<\/code>, React Query'nin kalbinde yer alan, uygulaman\u0131z\u0131n veri y\u00f6netimini basitle\u015ftiren ve performans\u0131n\u0131 art\u0131ran temel bir yap\u0131d\u0131r. Onun yeteneklerini ve metotlar\u0131n\u0131 derinlemesine anlamak, daha verimli, s\u00fcrd\u00fcr\u00fclebilir ve kullan\u0131c\u0131 dostu React uygulamalar\u0131 geli\u015ftirmenizi sa\u011flar. QueryClient<\/code>'\u0131n sundu\u011fu \u00f6nbellekleme, senkronizasyon ve etkile\u015fim mekanizmalar\u0131n\u0131 ustaca kullanarak, veri katman\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayabilir ve geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rabilirsiniz. React Query ile \u00e7al\u0131\u015f\u0131rken, QueryClient<\/code>'\u0131n g\u00fcc\u00fcn\u00fc tam olarak kullanmaktan \u00e7ekinmeyin; uygulaman\u0131z size te\u015fekk\u00fcr edecektir.<\/p>\nSSS (S\u0131k Sorulan Sorular)<\/h3>\n
QueryClient nedir ve neden React Query'de kullan\u0131l\u0131r?<\/h4>\n
QueryClient<\/code>, React Query'nin t\u00fcm veri y\u00f6netimini, \u00f6nbellekleme mekanizmalar\u0131n\u0131, arka plan g\u00fcncellemelerini ve hata y\u00f6netimini merkezi olarak kontrol eden ana nesnesidir. Uygulaman\u0131zdaki veri ak\u0131\u015f\u0131n\u0131 otomatikle\u015ftirerek geli\u015ftiricilerin manuel \u00f6nbellekleme ve veri senkronizasyonu gibi karma\u015f\u0131k g\u00f6revlerden kurtulmas\u0131n\u0131 sa\u011flar.<\/p>\nstaleTime<\/code> ve cacheTime<\/code> aras\u0131ndaki temel fark nedir?<\/h4>\nstaleTime<\/code>, bir sorgunun ne kadar s\u00fcre \"taze\" kalaca\u011f\u0131n\u0131 belirler. Bu s\u00fcre doldu\u011funda sorgu \"bayat\" (stale) hale gelir ve bir sonraki kullan\u0131mda arka planda yeniden getirilebilir. cacheTime<\/code> ise bir sorgunun \u00f6nbellekte ne kadar s\u00fcre saklanaca\u011f\u0131n\u0131 belirler. Sorgu aktif olarak kullan\u0131lmad\u0131\u011f\u0131nda bu s\u00fcre ba\u015flar ve doldu\u011funda veri \u00f6nbellekten tamamen silinir (garbage collection).<\/p>\nqueryClient.invalidateQueries()<\/code> ne zaman kullan\u0131lmal\u0131d\u0131r?<\/h4>\ninvalidateQueries()<\/code> genellikle bir mutasyon (veri olu\u015fturma, g\u00fcncelleme, silme) ba\u015far\u0131l\u0131 oldu\u011funda, ilgili sorgular\u0131n \u00f6nbelle\u011fini ge\u00e7ersiz k\u0131lmak ve b\u00f6ylece bu sorgular\u0131n bir sonraki kullan\u0131mda en g\u00fcncel veriyi API'den \u00e7ekmesini sa\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/p>\nBirden fazla QueryClient kullanmak m\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/h4>\n
QueryClientProvider<\/code>'\u0131 farkl\u0131 QueryClient<\/code> \u00f6rnekleriyle sarmalayarak uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri i\u00e7in ayr\u0131 \u00f6nbellekler ve yap\u0131land\u0131rmalar kullanabilirsiniz. Ancak \u00e7o\u011fu durumda tek bir QueryClient<\/code> yeterli olacakt\u0131r.<\/p>\nQueryClient, React Server Components (RSC) veya SSR ile nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h4>\n
QueryClient<\/code> \u00f6rne\u011fi olu\u015fturulur, sorgular sunucuda \u00f6nceden getirilir ve \u00f6nbellek verisi istemciye hidrasyon (hydration) i\u00e7in aktar\u0131l\u0131r. Bu, kullan\u0131c\u0131n\u0131n ilk y\u00fcklemede dolu bir i\u00e7erik g\u00f6rmesini sa\u011flar. RSC'ler i\u00e7in de benzer bir yakla\u015f\u0131m izlenir, sunucu bile\u015fenleri kendi veri getirme mant\u0131klar\u0131n\u0131 QueryClient<\/code> ile entegre edebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"QueryClient’\u0131 Uzmanla\u015fmak: React Query’nin Beyni (Kapsaml\u0131 Rehber)\nModern web uygulamalar\u0131nda veri y\u00f6netimi ve API \u00e7a\u011fr\u0131lar\u0131, kullan\u0131c\u0131 deneyimin…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-39097","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n