Menggunakan React Query untuk Fetch API Lebih Mudah

Ketika membuat aplikasi dengan React, salah satu tantangan terbesar yang sering ditemui adalah mengelola data dari API. Biasanya, kita menggunakan fetch atau axios lalu menyimpannya ke state menggunakan useState dan useEffect. Namun, semakin kompleks aplikasi, semakin ribet juga pengelolaan loading, error, caching, dan re-fetch data.

Apa itu React Query?

React Query adalah library untuk React yang berfokus pada pengelolaan data asinkron (seperti API request). Dengan React Query, kita tidak perlu lagi menulis boilerplate panjang untuk loading state, error handling, atau bahkan caching manual. Semua sudah disediakan.

Kenapa Harus Menggunakan React Query?

Beberapa keuntungan menggunakan React Query:

1. Mudah digunakan → cukup beberapa baris kode untuk fetch API.
2. Caching otomatis → data API yang sudah pernah diambil akan disimpan, sehingga tidak perlu fetch ulang jika tidak diperlukan.
3. Refetch otomatis → data bisa otomatis diperbarui ketika ada perubahan.
4. Handling state lebih rapi → sudah ada status seperti isLoading, isError, dan isSuccess.
5. Mendukung pagination dan infinite scroll dengan mudah.

Instalasi React Query

Pertama, install React Query:

npm install @tanstack/react-query

Lalu tambahkan QueryClient di root aplikasi, biasanya di index.js atau main.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Contoh Fetch API dengan React Query

Misalkan kita ingin mengambil data dari API publik:
https://jsonplaceholder.typicode.com/posts

Tanpa React Query biasanya kita pakai useEffect + useState. Dengan React Query cukup begini:

import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/posts').then((res) =>
        res.json()
      ),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>Daftar Postingan</h2>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

Penjelasan:

• queryKey: ['posts'] → identifier unik untuk cache data.
• queryFn → fungsi untuk mengambil data (bisa pakai fetch atau axios).
• isLoading, isError, error → state otomatis dari React Query.
• data → hasil data yang sudah di-fetch.

Fitur Menarik Lainnya

1. Refetch otomatis
   Data akan diperbarui secara otomatis jika ada perubahan pada queryKey.
2. Pagination
   Bisa dengan mudah mengatur paginasi tanpa logika manual ribet.
3. Invalidate Queries
   Misalnya setelah POST atau DELETE, kita bisa pakai queryClient.invalidateQueries(['posts']) agar data di-refresh otomatis.

Kesimpulan

React Query sangat membantu untuk mengelola data API di aplikasi React. Dengan fitur seperti caching, refetch otomatis, dan state management bawaan, kita tidak perlu lagi menulis kode berulang untuk meng-handle loading, error, dan data state.