Mengatasi Masalah Stale Data di React Query: Panduan Lengkap

Problem: Stale Data di React Query

Gue kasih contoh nih: lo lagi bikin aplikasi React yang fetch dan tampilin list item pake React Query. Pas testing, lo nemu masalah yang bikin kesel. Waktu pertama kali render halaman, datanya outdated atau ga bener. Tapi anehnya, kalo lo pindah halaman terus balik lagi, datanya malah fresh dan bener. Kok bisa gitu?

Masalah ini emang suka bikin bingung dan bikin user experience jadi jelek. Ini sering terjadi gara-gara cara React Query handle cached data dan query keys. Yuk kita bahas kenapa bisa begini dan gimana cara ngatasinnya step by step.

Kenapa Sih Ini Bisa Terjadi?

React Query tuh library yang keren banget buat manage server state di React. Defaultnya, dia nyimpen hasil query di cache dan pake data yang di-cache sampe ada data baru. Meskipun ini bikin performance lebih bagus, kadang malah bikin data jadi stale atau outdated kalo:

• Query key-nya ga unique atau ga deterministic
• Setting staleTime atau cacheTime nya kurang tepat
• Placeholder data dipake ga sesuai
• Query-nya ga refetch pas component mount

Sebenernya behavior ini emang didesain buat optimasi data fetching, tapi perlu di-set dengan bener biar data yang ditampilin selalu fresh.

Baca Juga: Text Editor React Terbaik: Perbandingan CKEditor vs TinyMCE vs Jodit

Panduan Step-by-Step Buat Atasi Stale Data

Nih gue kasih tau caranya:

1. Pake Query Key yang Unique dan Deterministic

React Query pake query key buat cache dan identifikasi data. Kalo query key-nya ga unique atau ga include semua dependencies, React Query bisa aja return cached data yang salah. Nih contoh cara bikin query key yang bener:

const { data, isLoading } = useQuery(
    ["dataList", userId, page, pageSize],
    fetchData
);

2. Set staleTime yang Tepat

Setting staleTime nentuin berapa lama data dianggep fresh. Kalo valuenya kekecilan, React Query bakal kebanyakan refetch. Sebaliknya, kalo kegedean, lo bakal liat stale data lebih lama.

Contohnya, buat bikin data fresh selama 5 menit:

const { data, isLoading } = useQuery(
    ["dataList", userId, page, pageSize],
    fetchData,
    {
        staleTime: 1000 * 60 * 5, // Data is fresh for 5 minutes
    }
);

3. Hindari Placeholder Data Kalo Ga Perlu

placeholderData itu buat nyediain data sementara sampe query-nya selesai. Tapi dia ga ngisi cache, jadi langsung diganti pas fetch selesai. Kalo lo pengen ngisi cache, mending pake initialData aja:

const { data, isLoading } = useQuery(
    ["dataList", userId, page, pageSize],
    fetchData,
    {
        initialData: {
            currentPage: 0,
            totalItems: 0,
            data: [],
            message: "",
            totalPages: 0,
        },
        staleTime: 1000 * 60 * 5,
    }
);

4. Enable Refetch on Mount atau Window Focus

Kadang lo perlu data fresh tiap kali component mount. Lo bisa set ini pake refetchOnMount atau refetchOnWindowFocus:

const { data, isLoading } = useQuery(
    ["dataList", userId, page, pageSize],
    fetchData,
    {
        refetchOnMount: "always",
        refetchOnWindowFocus: true,
    }
);

5. Manual Invalidate Query

Kalo lo pengen pastiin stale data ga pernah ditampilin, lo bisa manual invalidate query pake useQueryClient:

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

useEffect(() => {
    queryClient.invalidateQueries(["dataList", userId, page, pageSize]);
}, [userId, page, pageSize]);

6. Debug Pake React Query Devtools

Buat nemuin masalah di query configuration lo, pake React Query Devtools. Dia bisa nunjukin insight tentang query lo, termasuk keys, cache state, dan status fetching.

Baca Juga: Zustand: Lightweight State Management for Modern React Apps

Kesimpulan

React Query punya mekanisme caching dan fetching yang powerful banget, tapi perlu di-handle dengan hati-hati biar ga ada masalah stale data. Dengan ngikutin best practice yang udah gue jelasin—query key yang unique, staleTime yang tepat, pemakaian placeholderData yang bener, dan manual invalidation—lo bisa mastiin aplikasi lo nampilin data yang fresh dan akurat.

Yuk mulai terapin teknik-teknik ini buat optimasi setup React Query lo dan kasih user experience yang mantep!