Sederhanakan Pengelolaan Data di React dengan React Query

React Query adalah pustaka yang menyederhanakan pengelolaan data dalam aplikasi React. Ini menyediakan satu set kait dan utilitas yang membuat pengambilan, caching, dan memperbarui data menjadi mudah dan efisien. Dengan React Query, Anda dapat mengurangi jumlah kode boilerplate yang diperlukan untuk menangani data dalam komponen React Anda dan menjadikan aplikasi Anda lebih berkinerja.

Mengambil Data dengan React Query

React Query menyediakan pengait yang disebut useQueryyang memudahkan pengambilan data dari server. Pengait useQuerymengambil fungsi yang mengembalikan Promise yang diselesaikan dengan data. Saat Anda memanggil hook, React Query akan secara otomatis mengelola status pemuatan dan kesalahan untuk Anda.

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 akan secara otomatis meng-cache data yang dikembalikan oleh fetchDatafungsi. Jika Anda memanggil useQueryhook lagi dengan kunci kueri yang sama, React Query akan mengembalikan data yang di-cache alih-alih mengambilnya lagi.

Memperbarui Data dengan React Query

React Query juga menyediakan pengait bernama useMutationyang memudahkan untuk memperbarui data di server. Pengait useMutationmengambil fungsi yang mengembalikan Promise yang diselesaikan dengan data yang diperbarui. Saat Anda memanggil hook, React Query akan secara otomatis mengelola status pemuatan dan kesalahan untuk Anda.

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>
  );
}

Saat mutatefungsi dipanggil dengan objek, React Query akan mengirimkan permintaan ke server dengan data yang diperbarui. Jika permintaan berhasil, React Query akan memperbarui cache dengan data baru.

Kesimpulan

React Query adalah pustaka tangguh yang menyederhanakan pengelolaan data dalam aplikasi React. Dengan React Query, Anda dapat mengambil dan memperbarui data dengan mudah, sekaligus mengurangi jumlah kode boilerplate yang diperlukan untuk menangani data dalam komponen React Anda. Apakah Anda sedang membangun aplikasi sederhana atau kompleks, React Query dapat membantu Anda membuat aplikasi Anda lebih berkinerja dan dapat dipelihara.

Bersulang!!!