React Query adalah library yang mempermudah pengelolaan data server di aplikasi React. Ini sangat membantu saat melakukan **fetching**, **caching**, dan **syncing data**, serta mengoptimalkan performa aplikasi, terutama dalam konteks data yang sering berubah atau diambil dari API eksternal.
### Pengenalan React Query
React Query menangani pengambilan data dari API dan menyinkronkan data tersebut secara otomatis di aplikasi, sehingga meminimalkan kebutuhan untuk menggunakan state management tambahan (seperti Redux) khusus untuk pengambilan data.
#### 1. **Fetching Data**
Fetching data berarti mengambil data dari API atau sumber eksternal. Dengan React Query, pengambilan data menjadi lebih sederhana dan otomatis.
**Contoh dasar fetching dengan React Query:**
```jsx
import { useQuery } from 'react-query';
import axios from 'axios';
function App() {
const { data, error, isLoading } = useQuery('todos', () =>
axios.get('https://jsonplaceholder.typicode.com/todos')
);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>Todo List</h1>
<ul>
{data.data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
}
**Penjelasan:**
- `useQuery`: Hook utama di React Query yang digunakan untuk mengambil data.
- `'todos'`: Adalah query key, yang membantu dalam mengidentifikasi dan meng-cache data.
- Axios digunakan untuk melakukan request ke API `https://jsonplaceholder.typicode.com/todos`.
#### 2. **Caching Data**
React Query memiliki mekanisme **caching** yang sangat powerful. Data yang di-fetch akan secara otomatis disimpan dalam cache, sehingga saat data yang sama di-fetch lagi, React Query akan menampilkan data yang telah di-cache, mengurangi waktu loading dan jumlah request ke server.
React Query juga bisa melakukan re-fetching secara otomatis untuk memastikan data selalu up-to-date berdasarkan kebutuhan, misalnya saat user berpindah antar halaman.
- **Default cache time**: 5 menit (300.000 ms).
- **Stale time**: Waktu di mana data dianggap "fresh" dan tidak perlu di-fetch ulang.
**Contoh:**
```jsx
const { data, isLoading } = useQuery('todos', fetchTodos, {
staleTime: 10000, // Data dianggap fresh selama 10 detik
cacheTime: 600000 // Cache data selama 10 menit
});
#### 3. **Syncing Data**
Syncing atau penyelarasan data penting ketika data di server bisa berubah kapan saja. React Query menyediakan mekanisme untuk terus memantau dan memastikan data yang ada di aplikasi selalu sinkron dengan server.
**Refetching strategies**:
- **On Window Focus**: Data di-fetch ulang setiap kali user kembali ke aplikasi (misalnya, jika mereka berpindah ke tab browser lain).
- **Polling/interval fetching**: Data dapat di-fetch berulang kali dengan interval waktu tertentu.
- **On network reconnect**: React Query dapat mem-fetch ulang data jika koneksi internet user terputus dan tersambung kembali.
**Contoh refetch on window focus:**
```jsx
const { data, refetch } = useQuery('todos', fetchTodos, {
refetchOnWindowFocus: true // Default: true
});
#### 4. **Error Handling**
React Query juga memiliki fitur **error handling** yang baik. Jika fetch gagal, React Query memberikan mekanisme retry yang bisa dikustomisasi.
**Contoh:**
```jsx
const { data, error, isError } = useQuery('todos', fetchTodos, {
retry: 3, // Retry fetch sebanyak 3 kali jika gagal
retryDelay: 2000 // Delay 2 detik antara setiap retry
});
### Keuntungan Menggunakan React Query
- **Caching otomatis**: Tidak perlu menulis logika caching sendiri.
- **Optimized for performance**: Mengurangi jumlah fetch API dengan caching dan refetch yang diatur dengan baik.
- **Built-in refetching**: Memastikan data selalu up-to-date dengan re-fetch yang diatur sesuai kebutuhan.
- **Error handling yang baik**: Mudah untuk menambahkan retry dan handling error.
Setelah menguasai dasar fetching, caching, dan syncing data ini, kamu bisa melanjutkan ke fitur-fitur lebih lanjut, seperti paginasi, infinite scrolling, dan pengelolaan mutation (untuk data POST, PUT, DELETE).