Meningkatkan Kualitas Data Fetching di Aplikasi Modern
Di ekosistem React modern, mengelola data serverāfetching, caching, synchronizing, dan state managementāsering menjadi tantangan. Banyak developer masih memakai pendekatan manual seperti useEffect + fetch, yang rawan menyebabkan:
Request ganda yang tidak perlu
Loading state yang berantakan
Race condition
Cache yang tidak sinkron ketika data berubah
Kompleksitas logic untuk polling, retry, dan refetch
React Query hadir sebagai solusi battle-tested untuk membuat data fetching menjadi declarative, predictable, dan scalable.
Artikel ini membahas praktik terbaik (best practice) agar penggunaan React Query di proyek Anda rapi, efisien, dan maintainable.
š§ 1. Pahami Filosofi React Query: āServer State ā Client Stateā
React Query fokus pada server state, bukan data UI.
React Query memberi:
Filosofi dasarnya:
Jangan bawa urusan server ke state management manual. Delegasikan ke React Query.
š 2. Gunakan queryKey Berbentuk Array (Best Practice Mutlak)
Kenapa harus array?
ā Struktur terprediksi
ā Mendukung nested keys
ā Mudah di-compute
ā Stabil untuk caching
ā Membedakan query berdasarkan parameter
Contoh:
useQuery({
queryKey: ['users'],
queryFn: getUsers
})
useQuery({
queryKey: ['users', userId],
queryFn: () => getUserById(userId)
})
Array membuat React Query dapat:
š 3. Untuk POST/PUT/DELETE: Gunakan useMutation (Bukan useQuery)
Best practice yang sangat penting:
| Jenis Operasi | Hook yang dipakai | Alasan |
| GET (fetch) | useQuery | Data bisa dicache |
| POST/PUT/DELETE (mutate) | useMutation | Tidak dicache, sifatnya side effect |
Kenapa tidak memakai useQuery untuk POST?
Karena POST tidak bersifat idempotent, dan React Query bisa:
useMutation mendesain operasi mutate sebagai action, bukan state.
Best practice:
const mutation = useMutation({
mutationFn: updateUser,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['users'] })
}
})
š 4. Saat Data di Update dari Server (Tanpa Invalidasi Query)
Kadang data berubah di server, tapi Anda tidak bisa memanggil invalidateQueries. Misal:
Data berubah karena user lain
Data berubah oleh sistem background
Data dikirim via WebSocket
Server melakukan push update (SSE)
Best practice React Query:
Gunakan salah satu strategi:
ā 1. refetchInterval
Polling otomatis:
useQuery({
queryKey: ['notifications'],
queryFn: getNotifications,
refetchInterval: 5000
})
ā Jika halaman tidak terbuka apakah refetch tetap berjalan?
Tidak. React Query pause saat tab tidak aktif menggunakan document.visibilityState.
ā 2. Gunakan WebSocket + queryClient.setQueryData
Saat server push data:
socket.on('new_message', message => {
queryClient.setQueryData(['messages'], old => [...old, message])
})
ā 3. Gunakan SSE (Server-Sent Events)
Integrasi mudah seperti WebSocket.
ā 4. Manual merge data dengan setQueryData
Jika update datang dari sumber lain.
Daripada transform data di component (boros render), lakukan di query:
useQuery({
queryKey: ['products'],
queryFn: getProducts,
select: data => data.map(p => ({ ...p, price: p.price / 100 }))
})
Keuntungan:
š§¹ 6. Atur Stale Time & Cache Time dengan Bijak
Default React Query sangat agresif karena diasumsikan untuk data yang sering berubah.
Best practice:
ā Untuk data jarang berubah (misal countries):
staleTime: Infinity
ā Untuk data sedang (misal: users list)
staleTime: 1000 * 60 * 5
ā Untuk detail page:
staleTime: 1000 * 30
ā” 7. Optimistic Update yang Aman
Untuk UI yang responsif:
useMutation({
mutationFn: updateTodo,
onMutate: async newTodo => {
await queryClient.cancelQueries(['todos'])
const prev = queryClient.getQueryData(['todos'])
queryClient.setQueryData(['todos'], old =>
old.map(t => t.id === newTodo.id ? newTodo : t)
)
return { prev }
},
onError: (_err, _newTodo, ctx) => {
queryClient.setQueryData(['todos'], ctx.prev)
},
onSettled: () => {
queryClient.invalidateQueries(['todos'])
}
})
š§± 8. Centralize Query Key ā Jangan Hardcode
Buat file:
/src/lib/react-query-key.ts
export const queryKeys = {
users: () => ['users'] as const,
user: (id: string) => ['users', id] as const,
products: () => ['products'] as const,
}
Ini mencegah typo dan membuat invalidasi lebih aman.
š§ 9. Hindari Overfetching (Kesalahan Umum)
Jangan gunakan refetchInterval untuk semua data.
Pertanyaan utama:
Apakah data sering berubah?
Apakah perubahan harus tampil real-time?
Apakah polling terlalu mahal?
Jika tidak perlu ā hilangkan polling.
š§° 10. Set Up Global di Query Client (Best Practice Paling Penting)
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 2,
refetchOnWindowFocus: true,
refetchOnReconnect: true,
staleTime: 1000 * 60,
}
}
})
Global config ini memastikan aplikasi tetap efisien tanpa pengaturan manual di setiap query.
š Penutup: React Query Membuat Aplikasi Lebih Stabil, Cepat, dan Bersih
Menggunakan React Query dengan best practice:
menghilangkan boilerplate
mencegah bug server state
membuat aplikasi scalable
cache bekerja otomatis
UI terasa lebih cepat dan mulus
logic lebih bersih dan terstruktur
memudahkan debugging & performance tracing
React Query bukan sekadar ādata fetching libraryā.
Ia adalah server state ecosystem yang menyelesaikan masalah mendasar yang tidak bisa diselesaikan oleh React state biasa.
Jika digunakan dengan benarādengan queryKey yang konsisten, strategi pada mutation, invalidasi yang tepat, dan manajemen stale timeāReact Query menjadi tulang punggung arsitektur front-end modern.
