Tujuan Pembelajaran

Memahami konsep server state vs client state
Mampu mengimplementasikan TanStack Query di React Native
Mengerti strategi caching dan invalidation untuk mobile

Analogi

Diagram


      TanStack Query = Butler Restoran:
- Kamu pesan makanan (query)
- Butler ambil dari dapur (fetch API)
- Butler ingat pesananmu (cache)
- Kalau pesan lagi yang sama → langsung dari cache
- Kalau cache sudah basi (stale) → ambil ulang dari dapur
- Kamu gak perlu mikirin kapan harus refetch

TanStack Query seperti butler — kamu cuma pesan data, butler yang urus fetching, caching, retry, dan refresh. Kamu fokus ke UI.

Penjelasan Konsep

TanStack Query (React Query) adalah library untuk server state management. Di mobile, manfaatnya lebih besar dari web — karena koneksi mobile tidak stabil, caching sangat krusial.

Kenapa butuh: (1) Caching — data yang sudah di-fetch tidak perlu fetch ulang setiap screen visit. (2) Stale-while-revalidate — tampilkan cache dulu, fetch di background, update kalau ada perubahan. (3) Retry — kalau network error, auto retry dengan exponential backoff. (4) Pagination/Infinite scroll — built-in hooks. (5) Refetch on focus — saat user kembali ke app, auto refresh data.

Setup: (1) Install: @tanstack/react-query. (2) Wrap app dengan QueryClientProvider. (3) Create queryClient dengan config: staleTime, gcTime, retry. (4) Gunakan hooks: useQuery, useMutation, useInfiniteQuery.

useQuery: const { data, isLoading, error, refetch } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }). queryKey unik — dua query dengan key sama akan share cache. queryFn: function yang return Promise.

useMutation: untuk POST/PUT/DELETE. const mutation = useMutation({ mutationFn: createTodo, onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }) }). Setelah mutasi sukses, invalidate cache agar data refresh.

Mobile-specific config: (1) staleTime: 30 detik (default 0) — mobile user tidak butuh real-time. (2) refetchOnWindowFocus: false — ganti jadi refetchOnAppFocus. (3) retry: 2 — tidak perlu retry 3x di mobile.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep server state vs client state., mampu mengimplementasikan TanStack Query di React Native., dan mengerti strategi caching dan invalidation untuk mobile. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca TanStack Query untuk Mobile, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

TanStack Query seperti butler — kamu cuma pesan data, butler yang urus fetching, caching, retry, dan refresh. Kamu fokus ke UI. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. QueryClientProvider di root app. staleTime: 30000 (30 detik) — mobile user tidak perlu data real-time. invalidateQueries setelah mutation untuk refresh.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 30000, retry: 2 } } });

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TodoList />
    </QueryClientProvider>
  );
}

function TodoList() {
  const queryClient = useQueryClient();
  const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
  const mutation = useMutation({
    mutationFn: createTodo,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["todos"] }),
  });
  return <FlatList data={data} renderItem={renderTodo} />;
}

Penjelasan Kode

QueryClientProvider di root app. staleTime: 30000 (30 detik) — mobile user tidak perlu data real-time. invalidateQueries setelah mutation untuk refresh.

Prompt AI

Konfigurasikan TanStack Query untuk aplikasi mobile e-commerce dengan: product list (infinite scroll), product detail (cache 5 menit), cart (real-time), dan order history (cache 1 jam). Berikan config dan strategi.

Pertanyaan Reflektif

Berapa sering data di aplikasimu berubah? Apakah stale-while-revalidate pattern cocok? Atau kamu butuh real-time (WebSocket)?