### **Materi 5: Pengenalan RTK Query untuk Fetch Data**
**RTK Query** adalah fitur yang disediakan oleh **Redux Toolkit** yang mempermudah pengambilan dan pengelolaan data dari API di aplikasi React. RTK Query mengurangi kebutuhan untuk menulis banyak boilerplate seperti thunk, reducer, dan action secara manual, sehingga proses fetch data menjadi lebih efisien dan terstruktur.
#### **1. Apa Itu RTK Query?**
RTK Query adalah toolkit untuk menangani pengambilan data asinkron dengan fitur bawaan seperti:
- **Fetching data** dari API secara otomatis.
- **Caching** data agar tidak perlu mengambil ulang jika data masih tersedia.
- **Refetching** atau mengambil ulang data secara otomatis atau manual saat diperlukan.
- **Mutation** untuk mengirim atau mengubah data di server.
- Mendukung **pagination** dan **invalidation**.
#### **2. Instalasi RTK Query**
RTK Query adalah bagian dari **@reduxjs/toolkit**, jadi tidak perlu instalasi tambahan jika Redux Toolkit sudah diinstal. Jika belum, instal terlebih dahulu:
```bash
npm install @reduxjs/toolkit react-redux
#### **3. Membuat API Service dengan `createApi()`**
Langkah pertama dalam menggunakan RTK Query adalah membuat "service" untuk API dengan **`createApi()`**. Service ini mendefinisikan semua endpoint dan metode untuk fetch atau mutate data.
**Contoh pembuatan service:**
```javascript
// src/services/todoApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const todoApi = createApi({
reducerPath: 'todoApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
endpoints: (builder) => ({
getTodos: builder.query({
query: () => 'todos',
}),
addTodo: builder.mutation({
query: (newTodo) => ({
url: 'todos',
method: 'POST',
body: newTodo,
}),
}),
}),
});
export const { useGetTodosQuery, useAddTodoMutation } = todoApi;
**Penjelasan:**
- **`createApi()`**: Fungsi utama yang membuat API service.
- **`baseQuery`**: Menyediakan konfigurasi dasar untuk query, seperti base URL API.
- **`endpoints`**: Di dalamnya kita mendefinisikan operasi API, seperti **fetch** data (query) atau **mutasi** data (mutation).
- **`useGetTodosQuery`**: Hook otomatis yang dihasilkan oleh RTK Query untuk mengambil data.
- **`useAddTodoMutation`**: Hook untuk mengirim data ke server (misalnya POST request).
#### **4. Menghubungkan API Service ke Store**
Setelah membuat API service, kita harus menghubungkannya ke store Redux. Tambahkan reducer dari API service ke konfigurasi store.
**Contoh menghubungkan API service ke store:**
```javascript
// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import { todoApi } from './services/todoApi';
const store = configureStore({
reducer: {
[todoApi.reducerPath]: todoApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(todoApi.middleware),
});
export default store;
**Penjelasan:**
- **`[todoApi.reducerPath]`**: Ini adalah key untuk reducer RTK Query, di mana RTK Query akan menyimpan cache dan status pengambilan data.
- **`todoApi.middleware`**: Middleware ini diperlukan agar RTK Query bisa menangani pengambilan data dan caching.
#### **5. Menggunakan RTK Query di Komponen React**
Dengan API service yang sudah terhubung ke store, kita bisa mulai menggunakannya di komponen React. RTK Query menyediakan hook otomatis untuk setiap endpoint yang didefinisikan.
**Contoh penggunaan `useGetTodosQuery()` di komponen:**
```javascript
// src/components/TodoList.js
import React from 'react';
import { useGetTodosQuery } from '../services/todoApi';
const TodoList = () => {
const { data: todos, error, isLoading } = useGetTodosQuery();
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error fetching todos</div>;
}
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
};
export default TodoList;
**Penjelasan:**
- **`useGetTodosQuery()`**: Hook ini secara otomatis memulai fetch data ketika komponen dirender. Hasilnya termasuk `data`, `error`, dan `isLoading`.
- **`todos`**: Data yang berhasil diambil dari API, diambil dari properti `data`.
#### **6. Mengirim Data dengan `useMutation()`**
Selain fetch data, RTK Query juga mendukung operasi **mutation**, seperti menambah, menghapus, atau mengubah data. Kita bisa menggunakan **`useMutation()`** untuk ini.
**Contoh penggunaan `useAddTodoMutation()` untuk menambah todo:**
```javascript
// src/components/AddTodo.js
import React, { useState } from 'react';
import { useAddTodoMutation } from '../services/todoApi';
const AddTodo = () => {
const [newTodo, setNewTodo] = useState('');
const [addTodo, { isLoading }] = useAddTodoMutation();
const handleSubmit = async () => {
if (newTodo) {
await addTodo({ title: newTodo, completed: false });
setNewTodo(''); // Reset input setelah menambah todo
}
};
return (
<div>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="Add new todo"
/>
<button onClick={handleSubmit} disabled={isLoading}>
{isLoading ? 'Adding...' : 'Add Todo'}
</button>
</div>
);
};
export default AddTodo;
**Penjelasan:**
- **`useAddTodoMutation()`**: Hook ini digunakan untuk melakukan operasi POST atau mutation ke server.
- **`addTodo()`**: Fungsi untuk mengirim data baru ke server.
- **`isLoading`**: Status yang menunjukkan apakah request sedang diproses.
#### **7. Otomatisasi Caching dan Refetching**
RTK Query secara otomatis menangani **caching** data yang diambil. Jika data yang sama sudah ada di cache, RTK Query tidak akan melakukan fetch ulang, kecuali data tersebut dianggap sudah tidak valid (expired) atau kamu mengaturnya untuk refetch.
Kamu juga bisa mengatur **manual refetch** saat diperlukan, misalnya setelah menambah data baru atau mengubah data.
**Contoh refetch data setelah mutation:**
```javascript
const [addTodo] = useAddTodoMutation();
const { refetch } = useGetTodosQuery();
const handleSubmit = async () => {
await addTodo({ title: newTodo, completed: false });
refetch(); // Fetch ulang data setelah menambah todo
};
#### **Kesimpulan:**
Dengan **RTK Query**, proses pengambilan data, caching, dan mutation menjadi sangat mudah dan efisien, tanpa perlu banyak boilerplate. RTK Query menangani semua aspek pengambilan data, dari caching hingga refetching, secara otomatis.
Berikut adalah fitur utama yang dipermudah oleh RTK Query:
1. Fetching data dengan caching otomatis.
2. Mengirim dan mengubah data dengan mutation.
3. Dukungan untuk refetch dan invalidasi cache.