### Langkah-langkah Konfigurasi React Query
#### 1. **Install React Query**
Pertama, install `react-query` package menggunakan npm atau yarn.
```bash
npm install react-query
Atau jika kamu menggunakan yarn:
```bash
yarn add react-query
#### 2. **Inisialisasi QueryClient**
Langkah selanjutnya adalah menginisialisasi `QueryClient`. Ini adalah instance yang bertanggung jawab untuk mengelola semua query dan mutation di aplikasi.
```javascript
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
#### 3. **Membungkus Aplikasi dengan QueryClientProvider**
Untuk menggunakan React Query di seluruh aplikasi, kamu perlu membungkus komponen utama (biasanya `App`) dengan `QueryClientProvider`. Ini memungkinkan semua hook React Query seperti `useQuery` dan `useMutation` diakses di dalam aplikasi.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';
const queryClient = new QueryClient();
ReactDOM.render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
document.getElementById('root')
);
Sekarang semua query dan mutation bisa diakses melalui `useQuery` dan `useMutation` di komponen mana pun di aplikasi.
#### 4. **Konfigurasi Global QueryClient**
Kamu juga dapat menambahkan konfigurasi global ke `QueryClient`, seperti pengaturan untuk caching, retry, dan lain-lain. Contohnya:
```javascript
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // Disable re-fetch saat user kembali ke tab browser
retry: 2, // Retry query 2 kali jika terjadi error
staleTime: 5000, // Data dianggap fresh selama 5 detik
},
},
});
#### 5. **React Query Devtools (Opsional)**
Untuk debugging yang lebih mudah, kamu dapat menambahkan **React Query Devtools**, yang membantu melihat status cache dan query secara real-time.
1. Install package devtools:
```bash
npm install @tanstack/react-query-devtools
2. Tambahkan Devtools ke aplikasi:
```javascript
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
const queryClient = new QueryClient();
ReactDOM.render(
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>,
document.getElementById('root')
);
Devtools akan muncul di bagian bawah browser, di mana kamu bisa melihat query, status loading, error, dan data yang telah di-cache.
### 6. **Optimisasi dan Fitur Lainnya**
Kamu juga bisa melakukan beberapa optimisasi lebih lanjut di React Query:
- **Polling Data secara Berkala**: Jika kamu ingin polling data secara berkala, kamu bisa menggunakan opsi `refetchInterval`.
```javascript
const { data } = useQuery('todos', fetchTodos, {
refetchInterval: 5000, // Refetch data setiap 5 detik
});
- **Prefetching Data**: React Query juga memungkinkan untuk prefetching data sebelum halaman dimuat, biasanya berguna untuk SSR atau SPA dengan routing.
```javascript
queryClient.prefetchQuery('todos', fetchTodos);
- **Paginated Query**: Menambahkan konfigurasi untuk paginasi atau infinite scroll (seperti yang sudah dibahas sebelumnya).
### Contoh Proyek Lengkap
#### 1. **Setup QueryClient dan QueryClientProvider**
```jsx
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 60000, // Data fresh selama 1 menit
cacheTime: 300000, // Cache data selama 5 menit
},
},
});
ReactDOM.render(
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>,
document.getElementById('root')
);
#### 2. **Menggunakan `useQuery` dalam Komponen**
```jsx
// App.js
import { useQuery } from 'react-query';
import axios from 'axios';
const fetchTodos = async () => {
const res = await axios.get('https://jsonplaceholder.typicode.com/todos');
return res.data;
};
function App() {
const { data, isLoading, isError, error } = useQuery('todos', fetchTodos);
if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Error: {error.message}</div>;
return (
<div>
<h1>Todo List</h1>
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
}
export default App;
#### 3. **Menggunakan `useMutation` untuk Menambah Data**
```jsx
// AddTodo.js
import { useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';
const addTodo = async (newTodo) => {
const res = await axios.post('https://jsonplaceholder.typicode.com/todos', newTodo);
return res.data;
};
function AddTodo() {
const [title, setTitle] = useState('');
const queryClient = useQueryClient();
const mutation = useMutation(addTodo, {
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries('todos');
},
});
const handleSubmit = (e) => {
e.preventDefault();
mutation.mutate({ title, completed: false });
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Enter new todo"
/>
<button type="submit">Add Todo</button>
{mutation.isLoading && <p>Adding todo...</p>}
{mutation.isError && <p>Error: {mutation.error.message}</p>}
{mutation.isSuccess && <p>Todo added!</p>}
</form>
);
}
export default AddTodo;
### Kesimpulan
Dengan mengkonfigurasi React Query di proyek React:
- Kamu dapat mengelola pengambilan dan mutasi data secara global.
- React Query memberikan fleksibilitas tinggi dengan caching, refetching, dan error handling yang mudah diatur.
- React Query Devtools membantu debugging dan memantau status query di aplikasi.