React Query ile React'te Veri Yönetimini Basitleştirin

React Query, React uygulamalarında veri yönetimini basitleştiren bir kütüphanedir. Verilerin alınmasını, önbelleğe alınmasını ve güncellenmesini kolay ve verimli hale getiren bir dizi kanca ve yardımcı program sağlar. React Query ile, React bileşenlerinizdeki verileri işlemek için gereken standart kod miktarını azaltabilir ve uygulamanızın daha performanslı olmasını sağlayabilirsiniz.

React Query ile Veri Alma

useQueryReact Query , bir sunucudan veri almayı kolaylaştıran bir kanca sağlar . Kanca useQuery, verilerle çözülen bir Promise döndüren bir işlev alır. Hook'u çağırdığınızda, React Query yükleme ve hata durumlarını sizin için otomatik olarak yönetecektir.

import { useQuery } from 'react-query';

function MyComponent() {
  const { isLoading, error, data } = useQuery('myData', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

React Query, işlev tarafından döndürülen verileri otomatik olarak önbelleğe alır fetchData. useQueryKancayı aynı sorgu anahtarıyla tekrar çağırırsanız , React Query önbelleğe alınmış verileri tekrar getirmek yerine döndürür.

React Query ile Verileri Güncelleme

useMutationReact Query ayrıca bir sunucudaki verileri güncellemeyi kolaylaştıran bir kanca da sağlar . Kanca, useMutationgüncellenmiş verilerle çözülen bir Promise döndüren bir işlev alır. Hook'u çağırdığınızda, React Query yükleme ve hata durumlarını sizin için otomatik olarak yönetecektir.

import { useMutation } from 'react-query';

function MyComponent() {
  const [mutate, { isLoading, error, data }] = useMutation(updateData);

  const handleButtonClick = () => {
    mutate({ id: 123, name: 'New Name' });
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Update Data</button>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

İşlev bir nesne ile çağrıldığında mutate, React Query sunucuya güncellenmiş verilerle bir istek gönderir. İstek başarılı olursa, React Query önbelleği yeni verilerle güncelleyecektir.

Çözüm

React Query, React uygulamalarında veri yönetimini basitleştiren güçlü bir kitaplıktır. React Query ile, verileri kolayca alıp güncelleyebilir ve aynı zamanda React bileşenlerinizdeki verileri işlemek için gereken standart kod miktarını azaltabilirsiniz. İster basit ister karmaşık bir uygulama oluşturuyor olun, React Query, uygulamanızı daha performanslı ve bakım yapılabilir hale getirmenize yardımcı olabilir.

Şerefe!!!