Modern web uygulamalar\u0131 geli\u015ftirirken, veri \u00e7ekme i\u015flemleri i\u015fimizin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. React ekosisteminde Tek bir veri par\u00e7as\u0131n\u0131 \u00e7ekmek i\u00e7in Bir bile\u015fenin ayn\u0131 anda birden fazla ba\u011f\u0131ms\u0131z veriye ihtiyac\u0131 oldu\u011funda, genellikle her biri i\u00e7in ayr\u0131 bir <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, her ne kadar basit g\u00f6r\u00fcnse de, sorgu say\u0131s\u0131 artt\u0131k\u00e7a Bazen bir sorgunun sonucu, ba\u015fka bir sorgunun parametresi olarak kullan\u0131l\u0131r. \u00d6rne\u011fin, \u00f6nce bir kullan\u0131c\u0131 ID'sini \u00e7eker, sonra o ID ile kullan\u0131c\u0131n\u0131n detaylar\u0131n\u0131 veya sipari\u015flerini getiririz. Bu durumda, <\/code><\/p>\n Bu yakla\u015f\u0131m \u00e7al\u0131\u015fsa da, i\u00e7 i\u00e7e ge\u00e7mi\u015f Yukar\u0131daki \u00f6rneklerde de g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, birden fazla Yukar\u0131daki \"spagetti\" durumundan kurtulmak i\u00e7in, geli\u015ftirece\u011fimiz \u00e7\u00f6z\u00fcm\u00fcn belirli \u00f6zelliklere sahip olmas\u0131 gerekir. Bu \u00f6zellikler, hem geli\u015ftirici deneyimini iyile\u015ftirmeli hem de uygulaman\u0131n performans\u0131n\u0131 ve kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmal\u0131d\u0131r.<\/p>\n T\u00fcm sorgular\u0131n genel y\u00fckleme durumunu ( \u00c7ekilen t\u00fcm verilerin tek bir nesne veya dizi i\u00e7inde d\u00fczenli bir \u015fekilde eri\u015filebilir olmas\u0131, bile\u015fen i\u00e7erisinde veri kullan\u0131m\u0131n\u0131 basitle\u015ftirecektir. B\u00f6ylece, her bir veri par\u00e7as\u0131 i\u00e7in ayr\u0131 ayr\u0131 de\u011fi\u015fken tan\u0131mlamaktan kurtuluruz.<\/p>\n \u00c7\u00f6z\u00fcm\u00fcm\u00fcz, bir sorgunun sonucunun ba\u015fka bir sorgunun giri\u015fini olu\u015fturdu\u011fu senaryolar\u0131 do\u011fal bir \u015fekilde desteklemelidir. Bu, Her bir sorgu i\u00e7in \u00d6zellikle b\u00fcy\u00fck projelerde, \u00e7ekilen verilerin ve d\u00f6nd\u00fcr\u00fclen sonu\u00e7lar\u0131n tip g\u00fcvenli olmas\u0131, hatalar\u0131 erken yakalamak ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n Bu beklentileri kar\u015f\u0131lamak ve <\/code><\/p>\n Yukar\u0131daki basit \u00f6rnek, TanStack Query'nin Geli\u015ftirdi\u011fim Hook, TanStack Query'nin <\/code><\/p>\n Bu geli\u015fmi\u015f versiyon, sorgu tan\u0131mlar\u0131n\u0131 bir nesne olarak alarak, d\u00f6nd\u00fcr\u00fclen T\u00fcm sorgulardan d\u00f6nen veriler, anahtarlar\u0131yla e\u015fle\u015fen tek bir nesne ( \u015eimdi, bu hook'u ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullanabilece\u011fimizi ve bize ne gibi avantajlar sa\u011flad\u0131\u011f\u0131n\u0131 g\u00f6relim.<\/p>\n Daha \u00f6nceki kullan\u0131c\u0131lar ve \u00fcr\u00fcnler \u00f6rne\u011fini bu yeni hook ile yeniden yazal\u0131m:<\/p>\n <\/code><\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, kod \u00e7ok daha temiz ve okunabilir hale geldi. Tek bir Email: {userProfile.email}<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, her iki sorgu da do\u011frudan Evet, ancak do\u011frudan bir sorgunun sonucunu di\u011ferine parametre olarak ge\u00e7irme \u015feklinde de\u011fil, TanStack Query'nin Evet. E\u011fer E\u011fer sadece tek bir veri par\u00e7as\u0131na ihtiyac\u0131n\u0131z varsa veya sorgular\u0131n\u0131z aras\u0131nda hi\u00e7bir ili\u015fki ve ortak bir y\u00fckleme\/hata y\u00f6netimi ihtiyac\u0131 yoksa, do\u011frudan react-query<\/code> (\u015fimdiki ad\u0131yla TanStack Query) gibi k\u00fct\u00fcphaneler, bu s\u00fcreci b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirerek \u00f6nbellekleme, senkronizasyon ve sunucu durumu y\u00f6netimi gibi karma\u015f\u0131k konular\u0131 ele almam\u0131z\u0131 sa\u011fl\u0131yor. Ancak, birden fazla API \u00e7a\u011fr\u0131s\u0131n\u0131 ayn\u0131 anda veya birbirine ba\u011f\u0131ml\u0131 olarak yapmam\u0131z gerekti\u011finde, useQuery<\/code> hook’unun g\u00fcc\u00fcn\u00fc Promise.all<\/code> ile birle\u015ftirmek, kodumuzun h\u0131zla bir “spagetti” y\u0131\u011f\u0131n\u0131na d\u00f6n\u00fc\u015fmesine neden olabilir. Bu makalede, bu yayg\u0131n sorunu derinlemesine inceleyecek ve bu karma\u015fay\u0131 ortadan kald\u0131rmak i\u00e7in geli\u015ftirdi\u011fim, daha temiz ve y\u00f6netilebilir bir \u00e7\u00f6z\u00fcm\u00fc sizlerle payla\u015faca\u011f\u0131m.<\/p>\nMevcut Yakla\u015f\u0131mlar\u0131n S\u0131n\u0131rlar\u0131: Neden “Spagetti” Oluyor?<\/h3>\n
useQuery<\/code> kullanmak olduk\u00e7a basittir. Ancak, bir sayfada birden fazla ba\u011f\u0131ms\u0131z veya ba\u011f\u0131ml\u0131 veriye ihtiya\u00e7 duydu\u011fumuzda i\u015fler kar\u0131\u015fmaya ba\u015flar. Gelin, bu karma\u015fan\u0131n nedenlerini ve yayg\u0131n senaryolar\u0131 inceleyelim.<\/p>\nBa\u011f\u0131ms\u0131z \u00c7oklu Sorgular ve Promise.all<\/h4>\n
useQuery<\/code> \u00e7a\u011fr\u0131s\u0131 yapar\u0131z. T\u00fcm bu sorgular\u0131n tamamlanmas\u0131n\u0131 beklemek ve ortak bir y\u00fckleme\/hata durumunu y\u00f6netmek istedi\u011fimizde, Promise.all<\/code> akla ilk gelen \u00e7\u00f6z\u00fcmd\u00fcr. Ancak useQuery<\/code> zaten promise tabanl\u0131 bir yap\u0131ya sahip oldu\u011fundan, bu ikisini birle\u015ftirmek bekledi\u011fimizden daha karma\u015f\u0131k olabilir.<\/p>\n\nimport { useQuery } from '@tanstack\/react-query';\n\nfunction MyComponent() {\n const { data: users, isLoading: usersLoading, error: usersError } = useQuery({\n queryKey: ['users'],\n queryFn: () => fetch('\/api\/users').then(res => res.json()),\n });\n\n const { data: products, isLoading: productsLoading, error: productsError } = useQuery({\n queryKey: ['products'],\n queryFn: () => fetch('\/api\/products').then(res => res.json()),\n });\n\n const isLoading = usersLoading || productsLoading;\n const isError = usersError || productsError;\n\n if (isLoading) return Kullan\u0131c\u0131lar<\/h3>\n
\n {users?.map(user =>
\u00dcr\u00fcnler<\/h3>\n
\n {products?.map(product =>
isLoading<\/code> ve isError<\/code> durumlar\u0131n\u0131 manuel olarak birle\u015ftirmek yorucu hale gelir. Ayr\u0131ca, her bir sorgunun kendi durumu oldu\u011fundan, genel bir durum y\u00f6netimi zorla\u015f\u0131r.<\/p>\nBa\u011f\u0131ml\u0131 Sorgular ve Zincirleme Problemleri<\/h4>\n
enabled<\/code> se\u00e7ene\u011fi ile sorgular\u0131 zincirlemek yayg\u0131n bir y\u00f6ntemdir:<\/p>\n\nimport { useQuery } from '@tanstack\/react-query';\n\nfunction UserOrders({ userId }) {\n const { data: userProfile, isLoading: profileLoading } = useQuery({\n queryKey: ['userProfile', userId],\n queryFn: () => fetch(\/api\/users\/${userId}<\/code>).then(res => res.json()),\n enabled: !!userId, \/\/ userId varsa sorguyu \u00e7al\u0131\u015ft\u0131r\n });\n\n const { data: orders, isLoading: ordersLoading } = useQuery({\n queryKey: ['userOrders', userProfile?.id],\n queryFn: () => fetch(\/api\/users\/${userProfile.id}\/orders<\/code>).then(res => res.json()),\n enabled: !!userProfile?.id, \/\/ userProfile varsa sorguyu \u00e7al\u0131\u015ft\u0131r\n });\n\n const isLoading = profileLoading || ordersLoading;\n\n if (isLoading) return {userProfile.name} Sipari\u015fleri<\/h3>\n
\n {orders?.map(order =>
useQuery<\/code> \u00e7a\u011fr\u0131lar\u0131 ve ko\u015fullu enabled<\/code> ayarlar\u0131, \u00f6zellikle daha karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131k zincirlerinde kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Her bir ad\u0131m\u0131n kendi y\u00fckleme ve hata durumu oldu\u011fundan, genel bir durum elde etmek yine manuel birle\u015ftirme gerektirir.<\/p>\nHata Y\u00f6netimi ve Y\u00fckleme Durumunun Da\u011f\u0131n\u0131kl\u0131\u011f\u0131<\/h4>\n
useQuery<\/code> kulland\u0131\u011f\u0131m\u0131zda, her bir sorgunun kendi isLoading<\/code>, isError<\/code> ve data<\/code> de\u011fi\u015fkeni olur. Bu durumlar\u0131 tek bir \u00e7at\u0131 alt\u0131nda toplamak i\u00e7in manuel olarak mant\u0131k yazmak, tekrar eden ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir. \u00d6zellikle k\u0131smi ba\u015far\u0131 veya k\u0131smi hata senaryolar\u0131n\u0131 y\u00f6netmek daha da karma\u015f\u0131k hale gelir.<\/p>\n\u0130deal Bir \u00c7\u00f6z\u00fcmden Beklentilerimiz<\/h3>\n
Tek Bir Y\u00fckleme ve Hata Durumu<\/h4>\n
isLoading<\/code>) ve herhangi bir sorguda olu\u015fan genel hata durumunu (isError<\/code>) tek bir de\u011fi\u015fken \u00fczerinden kolayca eri\u015filebilir k\u0131lmal\u0131y\u0131z. Bu, UI'da spinner g\u00f6stermek veya hata mesajlar\u0131n\u0131 render etmek i\u00e7in kod tekrar\u0131n\u0131 \u00f6nleyecektir.<\/p>\nToplu Veri Eri\u015fimi<\/h4>\n
Ba\u011f\u0131ml\u0131 Sorgu Deste\u011fi<\/h4>\n
enabled<\/code> zincirlerini daha temiz bir yap\u0131yla y\u00f6netmemizi sa\u011flamal\u0131d\u0131r.<\/p>\nEsneklik ve Geni\u015fletilebilirlik<\/h4>\n
useQuery<\/code>'nin sundu\u011fu t\u00fcm se\u00e7enekleri (staleTime<\/code>, cacheTime<\/code>, retry<\/code> vb.) kullanabilmeliyiz. Ayr\u0131ca, gelecekte farkl\u0131 ihtiya\u00e7lara g\u00f6re kolayca geni\u015fletilebilir olmal\u0131d\u0131r.<\/p>\nTip G\u00fcvenli\u011fi (TypeScript ile)<\/h4>\n
\u00c7\u00f6z\u00fcm\u00fcm\u00fcz: useCombinedQueries Hook'u<\/h3>\n
useQuery<\/code>\/Promise.all<\/code> spagettisine son vermek i\u00e7in, useCombinedQueries<\/code> ad\u0131n\u0131 verdi\u011fim (veya benzeri bir isimle) \u00f6zel bir React hook'u geli\u015ftirdim. Bu hook, bir dizi sorguyu tek bir \u00e7a\u011fr\u0131da y\u00f6neterek, ortak bir y\u00fckleme ve hata durumu sunar ve t\u00fcm verileri tek bir yap\u0131da toplar.<\/p>\nTemel Fikir: Sorgu Tan\u0131mlar\u0131n\u0131n Bir Dizisi<\/h4>\n
useCombinedQueries<\/code> hook'u, useQuery<\/code>'ye ge\u00e7irdi\u011fimiz se\u00e7enek nesnelerinin bir dizisini al\u0131r. Bu dizi, hook'un i\u00e7 mant\u0131\u011f\u0131 taraf\u0131ndan i\u015flenerek t\u00fcm sorgular \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve sonu\u00e7lar birle\u015ftirilir.<\/p>\n\nimport { useQueries, UseQueryOptions, QueryFunction } from '@tanstack\/react-query';\n\ninterface CombinedQueryResultuseQueries<\/code> hook'unu kullanarak birden fazla sorguyu ayn\u0131 anda \u00e7al\u0131\u015ft\u0131rman\u0131n ve sonu\u00e7lar\u0131n\u0131 birle\u015ftirmenin temel mant\u0131\u011f\u0131n\u0131 g\u00f6steriyor. Ancak, ba\u011f\u0131ml\u0131 sorgular ve daha geli\u015fmi\u015f senaryolar i\u00e7in bu yap\u0131y\u0131 biraz daha geni\u015fletmemiz gerekecek.<\/p>\nuseCombinedQueries Nas\u0131l \u00c7al\u0131\u015f\u0131r? Derinlemesine Bir Bak\u0131\u015f<\/h4>\n
useCombinedQueries<\/code> hook'u, useQueries<\/code>'in sa\u011flad\u0131\u011f\u0131 g\u00fcc\u00fc kullanarak, her bir sorgunun durumunu ayr\u0131 ayr\u0131 y\u00f6netirken, d\u0131\u015far\u0131ya tek bir birle\u015fik durum sunar. \u0130\u015fte ana bile\u015fenleri ve \u00e7al\u0131\u015fma prensibi:<\/p>\n1. Sorgu Tan\u0131mlar\u0131n\u0131n Kabul\u00fc<\/h5>\n
useQuery<\/code>'ye ge\u00e7irece\u011fimiz t\u00fcm se\u00e7enekleri i\u00e7eren bir dizi nesne (UseQueryOptions<\/code>) al\u0131r. Bu sayede her bir sorgunun kendi queryKey<\/code>, queryFn<\/code> ve di\u011fer \u00f6zel ayarlar\u0131 olabilir.<\/p>\n2. useQueries Kullan\u0131m\u0131<\/h5>\n
useQueries<\/code> hook'u, birden fazla sorguyu ayn\u0131 anda \u00e7al\u0131\u015ft\u0131rmak ve her birinin sonucunu bir dizi olarak d\u00f6nd\u00fcrmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bizim hook'umuz da tam olarak bunu kullan\u0131r.<\/p>\n\n\/\/ useCombinedQueries.ts\nimport { useQueries, UseQueryOptions, QueryFunction } from '@tanstack\/react-query';\n\ntype QueryConfigdata<\/code> nesnesinin de anahtarlar\u0131yla e\u015fle\u015fen tiplere sahip olmas\u0131n\u0131 sa\u011flar. Bu sayede, verilere data.users<\/code> veya data.products<\/code> gibi tip g\u00fcvenli bir \u015fekilde eri\u015febiliriz.<\/p>\n3. Birle\u015fik Durum Y\u00f6netimi<\/h5>\n
useQueries<\/code>'in d\u00f6nd\u00fcrd\u00fc\u011f\u00fc sonu\u00e7lar dizisini (results<\/code>) kullanarak, t\u00fcm sorgular\u0131n genel y\u00fckleme, hata ve ba\u015far\u0131 durumlar\u0131n\u0131 hesaplar\u0131z:<\/p>\n\n
isLoading<\/code>: Herhangi bir sorgu y\u00fckleniyorsa true<\/code>.<\/li>\nisError<\/code>: Herhangi bir sorgu hata verdiyse true<\/code>.<\/li>\nerror<\/code>: Hata veren ilk sorgunun hatas\u0131.<\/li>\nisSuccess<\/code>: T\u00fcm sorgular ba\u015far\u0131l\u0131ysa true<\/code>.<\/li>\nisFetching<\/code>: Herhangi bir sorgu veri \u00e7ekiyorsa (yeniden \u00e7ekme dahil) true<\/code>.<\/li>\n<\/ul>\n4. Veri Birle\u015ftirme<\/h5>\n
data<\/code>) i\u00e7inde toplan\u0131r. Bu, bile\u015fen i\u00e7erisinde verilere eri\u015fimi son derece kolayla\u015ft\u0131r\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131nda Kullan\u0131m ve Avantajlar\u0131<\/h4>\n
1. Ba\u011f\u0131ms\u0131z \u00c7oklu Sorgular\u0131 Temiz Bir \u015eekilde Y\u00f6netme<\/h5>\n
\nimport React from 'react';\nimport { useCombinedQueries } from '.\/useCombinedQueries'; \/\/ Kendi hook dosyan\u0131z\n\ninterface User { id: number; name: string; email: string; }\ninterface Product { id: number; name: string; price: number; }\n\nfunction MyCombinedComponent() {\n const { data, isLoading, isError, error } = useCombinedQueries({\n users: {\n queryKey: ['users'],\n queryFn: () => fetch('\/api\/users').then(res => res.json()),\n },\n products: {\n queryKey: ['products'],\n queryFn: () => fetch('\/api\/products').then(res => res.json()),\n },\n });\n\n if (isLoading) return Kullan\u0131c\u0131lar<\/h3>\n
\n {users?.map((user: User) =>
\u00dcr\u00fcnler<\/h3>\n
\n {products?.map((product: Product) =>
isLoading<\/code> ve isError<\/code> durumu ile t\u00fcm UI ak\u0131\u015f\u0131n\u0131 y\u00f6netebiliyoruz ve verilere data.users<\/code> ve data.products<\/code> \u015feklinde tip g\u00fcvenli bir \u015fekilde eri\u015febiliyoruz.<\/p>\n2. Ba\u011f\u0131ml\u0131 Sorgular\u0131 Y\u00f6netme (Geli\u015fmi\u015f)<\/h5>\n
useCombinedQueries<\/code> hook'unun temel versiyonu ba\u011f\u0131ms\u0131z sorgular i\u00e7in harikad\u0131r. Ba\u011f\u0131ml\u0131 sorgular\u0131 y\u00f6netmek i\u00e7in ise, useQuery<\/code>'nin enabled<\/code> se\u00e7ene\u011fini kullanarak veya hook'u daha da geli\u015ftirerek bir sorgunun sonucunu di\u011ferine aktarabiliriz. \u0130\u015fte enabled<\/code> ile bir \u00f6rnek:<\/p>\n\nimport React from 'react';\nimport { useCombinedQueries } from '.\/useCombinedQueries';\n\ninterface User { id: number; name: string; }\ninterface Order { id: number; productId: number; amount: number; }\n\nfunction UserDashboard({ userId }: { userId: number }) {\n const { data, isLoading, isError, error } = useCombinedQueries({\n userProfile: {\n queryKey: ['userProfile', userId],\n queryFn: () => fetch(\/api\/users\/${userId}<\/code>).then(res => res.json()),\n enabled: !!userId,\n },\n userOrders: {\n queryKey: ['userOrders', userId],\n queryFn: ({ queryKey }) => {\n const [, fetchedUserId] = queryKey;\n \/\/ Burada data.userProfile.id'yi kullanmak yerine,\n \/\/ do\u011frudan userId'yi veya queryKey'den gelen de\u011feri kullanabiliriz.\n \/\/ Daha karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131klar i\u00e7in useCombinedQueries'i geli\u015ftirmek gerekir.\n return fetch(\/api\/users\/${fetchedUserId}\/orders<\/code>).then(res => res.json());\n },\n enabled: !!userId, \/\/ userProfile'\u0131n y\u00fcklenmesini beklemek yerine, userId'nin varl\u0131\u011f\u0131na ba\u011flad\u0131k\n \/\/ E\u011fer userProfile'dan gelen bir ID'ye ba\u011f\u0131ml\u0131ysak,\n \/\/ hook'un i\u00e7 mant\u0131\u011f\u0131n\u0131 bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 y\u00f6netmek \u00fczere geni\u015fletmeliyiz.\n \/\/ \u015eimdilik, her iki sorgunun da do\u011frudan userId'ye ba\u011f\u0131ml\u0131 oldu\u011funu varsayal\u0131m.\n },\n });\n\n if (isLoading) return {userProfile.name} Paneli<\/h3>\n
Sipari\u015fleri:<\/h4>\n
\n {userOrders?.map((order: Order) =>
userId<\/code>'ye ba\u011f\u0131ml\u0131 oldu\u011fu i\u00e7in enabled: !!userId<\/code> yeterli oldu. Ancak, bir sorgunun verisinin di\u011ferinin parametresi oldu\u011fu ger\u00e7ek bir zincirleme senaryosu i\u00e7in useCombinedQueries<\/code>'i biraz daha ak\u0131ll\u0131 hale getirmemiz gerekir. Bu, genellikle queryFn<\/code> i\u00e7inde \u00f6nceki sorgular\u0131n sonu\u00e7lar\u0131na eri\u015fim sa\u011flayarak veya hook'u daha karma\u015f\u0131k bir ba\u011f\u0131ml\u0131l\u0131k grafi\u011fi y\u00f6netecek \u015fekilde tasarlayarak yap\u0131labilir. TanStack Query'nin useQueries<\/code>'i, bu t\u00fcr do\u011frudan ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmek i\u00e7in enabled<\/code> se\u00e7ene\u011fini kullanmay\u0131 te\u015fvik eder.<\/p>\nAvantajlar\u0131 \u00d6zetle:<\/h5>\n
\n
isLoading<\/code>, isError<\/code> ve data<\/code> nesnesi ile karma\u015f\u0131kl\u0131\u011f\u0131 azaltma.<\/li>\nuseQueries<\/code> sayesinde sorgular\u0131n paralel \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 ve TanStack Query'nin \u00f6nbellekleme mekanizmalar\u0131ndan tam olarak faydalanma.<\/li>\n<\/ul>\nSonu\u00e7: Daha Temiz, Daha Y\u00f6netilebilir Veri \u00c7ekme<\/h3>\n
useQuery<\/code> ve Promise.all<\/code> kombinasyonunun getirdi\u011fi \"spagetti\" kod, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda geli\u015ftirici verimlili\u011fini d\u00fc\u015f\u00fcren ve hatalara davetiye \u00e7\u0131karan bir sorundur. Geli\u015ftirdi\u011fimiz useCombinedQueries<\/code> hook'u, bu soruna zarif ve etkili bir \u00e7\u00f6z\u00fcm sunarak, birden fazla veri \u00e7ekme i\u015flemini tek bir, okunabilir ve tip g\u00fcvenli bir aray\u00fcz alt\u0131nda birle\u015ftirir. Bu sayede, React bile\u015fenlerinizdeki veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 basitle\u015ftirebilir, daha az tekrar eden kod yazabilir ve uygulaman\u0131z\u0131n bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rabilirsiniz. Art\u0131k \"useQuery\/Promise.all spagettisinden\" kurtulup, daha d\u00fczenli ve keyifli bir geli\u015ftirme deneyimine sahip olabilirsiniz. \ud83e\uded6\ud83e\udda1<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
1. useCombinedQueries hook'u Promise.all'dan ne kadar farkl\u0131?<\/h4>\n
useCombinedQueries<\/code> hook'u, temelinde TanStack Query'nin useQueries<\/code> hook'unu kullan\u0131r, bu da asl\u0131nda arka planda promise'lar\u0131 (ve dolay\u0131s\u0131yla Promise.all<\/code> benzeri bir mekanizmay\u0131) y\u00f6netir. Ancak fark \u015fudur: useCombinedQueries<\/code>, useQuery<\/code>'nin sundu\u011fu t\u00fcm geli\u015fmi\u015f \u00f6zellikleri (\u00f6nbellekleme, tekrar deneme, odaklanma \u00fczerine yenileme vb.) korurken, Promise.all'\u0131n sadece asenkron i\u015flemleri paralel \u00e7al\u0131\u015ft\u0131rma yetene\u011fini de\u011fil, ayn\u0131 zamanda bu sorgular\u0131n React ya\u015fam d\u00f6ng\u00fcs\u00fc ile entegrasyonunu, y\u00fckleme\/hata durumlar\u0131n\u0131n merkezi y\u00f6netimini ve tip g\u00fcvenli\u011fini de sa\u011flar. K\u0131sacas\u0131, Promise.all<\/code> sadece promise'lar\u0131 \u00e7\u00f6zerken, useCombinedQueries<\/code> React Query'nin t\u00fcm ekosistemini kullanarak daha kapsaml\u0131 bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n2. Ba\u011f\u0131ml\u0131 sorgular\u0131 ger\u00e7ekten bu hook ile y\u00f6netebilir miyim?<\/h4>\n
enabled<\/code> se\u00e7ene\u011fini kullanarak. \u00d6rne\u011fin, ilk sorgunun verisi gelene kadar ikinci sorguyu \u00e7al\u0131\u015ft\u0131rmamak i\u00e7in enabled: !!data.ilkSorguSonucu<\/code> gibi bir yap\u0131 kullanabilirsiniz. Daha karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131klar i\u00e7in, hook'u daha geli\u015fmi\u015f bir ba\u011f\u0131ml\u0131l\u0131k grafi\u011fi y\u00f6netecek \u015fekilde \u00f6zelle\u015ftirmek gerekebilir, ancak \u00e7o\u011fu senaryoda enabled<\/code> yeterli olacakt\u0131r.<\/p>\n3. Bu hook'u kullanmak performans avantaj\u0131 sa\u011flar m\u0131?<\/h4>\n
useCombinedQueries<\/code>, TanStack Query'nin useQueries<\/code> mekanizmas\u0131n\u0131 kulland\u0131\u011f\u0131 i\u00e7in, t\u00fcm sorgular paralel olarak ba\u015flat\u0131l\u0131r. Bu, her bir sorgunun ayr\u0131 ayr\u0131 tamamlanmas\u0131n\u0131 beklemek yerine, hepsinin ayn\u0131 anda a\u011f isteklerini yapabilece\u011fi anlam\u0131na gelir. Ayr\u0131ca, TanStack Query'nin g\u00fc\u00e7l\u00fc \u00f6nbellekleme ve veri senkronizasyon yeteneklerinden de tam olarak faydalan\u0131l\u0131r, bu da gereksiz a\u011f isteklerini \u00f6nleyerek performans\u0131 art\u0131r\u0131r.<\/p>\n4. Hata y\u00f6netimi nas\u0131l \u00e7al\u0131\u015f\u0131r? Bir sorgu hata verirse ne olur?<\/h4>\n
useCombinedQueries<\/code> i\u00e7indeki sorgulardan herhangi biri hata verirse, hook'un d\u00f6nd\u00fcrd\u00fc\u011f\u00fc isError<\/code> durumu true<\/code> olur ve error<\/code> de\u011fi\u015fkeni, hata veren ilk sorgunun hatas\u0131n\u0131 i\u00e7erir. Bu sayede, tek bir merkezi noktadan t\u00fcm hata durumunu y\u00f6netebilir ve kullan\u0131c\u0131ya uygun geri bildirim sa\u011flayabilirsiniz. TanStack Query'nin tekrar deneme (retry) mekanizmalar\u0131 da varsay\u0131lan olarak devrede olacakt\u0131r.<\/p>\n5. Bu hook'u her zaman kullanmal\u0131 m\u0131y\u0131m, yoksa baz\u0131 durumlarda useQuery daha m\u0131 iyi?<\/h4>\n
useQuery<\/code> kullanmak daha basit ve yeterli olabilir. useCombinedQueries<\/code>, \u00f6zellikle birden fazla ba\u011f\u0131ms\u0131z veya ba\u011f\u0131ml\u0131 sorguyu tek bir bile\u015fen i\u00e7inde y\u00f6netmeniz gerekti\u011finde ve kod okunabilirli\u011fi, durum y\u00f6netimi ve tip g\u00fcvenli\u011fini art\u0131rmak istedi\u011finizde parlar. Temel kural, kodunuz \"spagetti\" gibi g\u00f6r\u00fcnmeye ba\u015flad\u0131\u011f\u0131nda bu t\u00fcr bir soyutlamay\u0131 d\u00fc\u015f\u00fcnmektir.<\/p>\n","protected":false},"excerpt":{"rendered":"Tek bir veri par\u00e7as\u0131n\u0131 \u00e7ekmek i\u00e7in useQuery kullanmak olduk\u00e7a basittir. Ancak, bir sayfada birden fazla ba\u011f\u0131ms\u0131z veya ba\u011f\u0131ml\u0131 veriye ihtiya\u00e7 duy…","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":[1],"tags":[],"class_list":{"0":"post-39466","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n