React Query Nedir? Nasıl Kullanılır?

React Query, bir React uygulamasında veri çekme ve yönetme için bir kütüphanedir. Bu kütüphane, veri istemlerini yönetmek, önbellekleme, tarama, çoklu isteklerin yönetimi gibi birçok işlemi otomatik olarak gerçekleştirir. Bu sayede uygulamanızda veri çekme ve yönetme işlemlerinin yönetimi için daha az kod yazmanıza yardımcı olur.

React Query’yi kullanmak için öncelikle kütüphaneyi projenize dahil etmeniz gerekmektedir. Bu, npm veya yarn komutlarını kullanarak yapılabilir:

npm install react-query

yarn add react-query

Daha sonra, veri çekmek istediğiniz bir API’ye bir istek göndermek için useQuery hook'unu kullanabilirsiniz. Örneğin, bir REST API'sına bir GET isteği göndermek için şu şekilde kullanabilirsiniz:

import { useQuery } from 'react-query'

function Bilesen() {
  const { data, error, isLoading } = useQuery('todos', () =>
    fetch('https://my-api.com/todos').then((res) => res.json())
  )

  if (isLoading) return 'Yükleniyor...'
  if (error) return 'Error Bulundu: ' + error.message

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

React Query, veri çekme işlemlerinde önbellekleme ve tarama gibi özellikleri de otomatik olarak sağlar. Örneğin, useQuery hook'unun ikinci parametresi olarak bir config objesi geçebilirsiniz. Bu objede, önbellekleme ve tarama ayarları gibi özellikleri yapılandırabilirsiniz.

React Query, aynı zamanda çoklu veri isteklerini yönetmek için de kullanılabilir. Örneğin, bir liste sayfasında sayfadaki tüm öğelerin ayrı ayrı veri istekleri yapılırken, bu isteklerin hepsinin tamamlanmasını bekleyen bir spinner göstermek isteyebilirsiniz. Bu durumda, useMutation hook'un işlemini kullanarak çoklu veri isteklerini yönetebilirsiniz.

Örneğin:

import { useMutation } from 'react-query'

function MyListPage() {
  const [mutate] = useMutation(() => {
    const todoPromise = fetch('https://my-api.com/todos').then((res) => res.json())
    const userPromise = fetch('https://my-api.com/users').then((res) => res.json())
    return Promise.all([todoPromise, userPromise])
  })

  useEffect(() => {
    mutate()
  }, [mutate])

  return (
    <>
      <TodoList />
      <UserList />
    </>
  )
}

Burada, useMutation hook'u ile bir istek fonksiyonu tanımladık. Bu fonksiyon, todo ve kullanıcı listelerini çeken iki veri isteğini gerçekleştirerek, todo ve kullanıcı listelerini döndüren bir Promise döndürür. Daha sonra, useEffect hook'unu kullanarak mutate fonksiyonunu çalıştırdık. Bu sayede, todo ve kullanıcı listelerinin verilerini aynı anda çektik ve iki liste için ayrı ayrı useQuery hook'ları kullanmadık.

React Query, veri çekme işlemlerinde kullandığınız API’lerin tipine ve yapısına göre farklı özellikler sunar. Bu özellikleri ayrıntılı olarak inceleyerek, komplike veri çekme işlemlerinde React Query’yi nasıl daha etkili bir şekilde kullanabileceğinizi öğrenebilirsiniz.

Bundan önce biz bir adet daha komplike örneği görmüş olalım:

Aşağıdaki örnekte, bir ürünler listesi sayfasında ürünleri çeken bir veri isteği yapılmaktadır. Bu veri isteği, sayfadaki ürünlerin tümünün verilerini döndürürken, sayfadaki her bir ürün için de ayrı ayrı ürün detaylarını çeken veri istekleri yapılmaktadır. Bu veri isteklerinin hepsinin tamamlanmasını bekleyen bir spinner gösterilmektedir:

import { useMutation, useQuery } from 'react-query'

function ProductListPage() {
  const { data: products, error, isLoading } = useQuery('products', () =>
    fetch('https://my-api.com/products').then((res) => res.json())
  )

  const [mutateProductDetail] = useMutation(async (productId) => {
    const res = await fetch(`https://my-api.com/products/${productId}`)
    return res.json()
  })

  useEffect(() => {
    if (products) {
      products.forEach((product) => mutateProductDetail(product.id))
    }
  }, [products, mutateProductDetail])

  if (isLoading) return 'Yükleniyor...'
  if (error) return 'Error Bulundu: ' + error.message

  return (
    <ul>
      {products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </ul>
  )
}

function Product({ product }) {
  const { data: productDetail, isLoading } = useQuery(
    ['productDetail', product.id],
    () => mutateProductDetail(product.id)
  )

  if (isLoading) return 'Yükleniyor...'

  return (
    <li>
      <h2>{product.name}</h2>
      <p>{productDetail.description}</p>
    </li>
  )
}

Burada, useQuery hook'u ile ürünler listesi verisi çekilirken, useMutation hook'u ile de her bir ürün için ayrı ayrı ürün detayı verisi çekilmektedir. useEffect hook'u ile de ürünler listesi verisi çekildikten sonra, ürünler listesi içindeki tüm ürünler için ürün detayı verisi çeken mutate fonksiyonu çalıştırılmaktadır. Bu sayede, tüm ürünlerin veri istekleri yapılırken bir spinner gösterilebilmektedir. Ayrıca, useQuery hook'unun ikinci parametresinde mutate fonksiyonunu çağırdık. Bu sayede, ürün detayı verisi çekilirken mutate fonksiyonu çalıştırılmış olur ve ürün detayı verisi çekilmiş olur.

Bu örnekte, ürünler listesi verisi çekilirken aynı zamanda ürünler listesi içindeki tüm ürünler için ürün detayı verisi de çekilmiş olur. Bu sayede, ürünler listesi sayfasında ürünlerin ayrıntılı bilgilerine erişilebilir.

React Query, veri çekme işlemlerinde önbellekleme ve tarama gibi özellikleri de otomatik olarak sağlar. Örneğin, useQuery hook'unun config objesi içinde önbellekleme ve tarama ayarlarını yapılandırabilirsiniz. Bu sayede, veri isteklerinin önbellekte tutulması ve taranması gibi işlemleri daha etkili bir şekilde yönetebilirsiniz.

React Query, veri çekme işlemlerinde komplike senaryoları yönetmek için kullanılabilir. Örneğin, ürünler listesi sayfasında ürünlerin ayrıntılı bilgilerine erişirken, ürünler listesi verisi ve ürünlerin ayrıntılı bilgileri verisi çekilebilir. Bu sayede, ürünler listesi sayfasında ürünlerin ayrıntılı bilgilere hızlı bir şekilde erişilebilir.