Instalasi & Setup Provider ⚙️

Sebelum kita bisa fetching data, kita harus pasang "Otak"-nya dulu (QueryClient) dan bungkus aplikasi kita dengan Provider.

1. Install Library 📦

Buka terminal dan jalankan perintah ini:

npm install @tanstack/react-query @tanstack/react-query-devtools

Kita install DevTools sekalian, karena ini wajib banget buat debugging.

2. Buat Provider Komponen 🔌

Kita gak bisa langsung taruh logic React Query di layout.tsx (karena layout itu Server Component, sedangkan React Query butuh Context yang cuma ada di Client).

Solusinya: Kita bikin file terpisah.

Buat file baru: src/components/providers/QueryProvider.tsx (Kalau folder components/providers belum ada, buat dulu).

 
'use client' // Wajib! Karena pake Context dan State
 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { useState } from 'react'
 
export default function QueryProvider({ children }: { children: React.ReactNode }) {
  // 1. Buat instance client.
  // Kita pake useState biar client-nya gak dibuat ulang (reset) tiap kali komponen re-render.
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        // Data dianggap "fresh" selama 60 detik.
        // Artinya: Kalau user balik ke halaman ini dalam < 1 menit, gak usah fetch ke server lagi.
        staleTime: 60 * 1000, 
      },
    },
  }))
 
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      
      {/* Tombol Kembang Api buat Debugging (Muncul cuma di Development) */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

⚠️

Penting: Jangan menaruh new QueryClient() di luar komponen atau tanpa useState. Nanti cache-nya bisa bocor (shared) antar user kalau di render di server. Bahaya!

3. Pasang di Root Layout 🏠

Sekarang "pembungkus" tadi kita pasang di file utama aplikasi.

Buka file: src/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
 
// 1. Import Provider yang baru kita buat
import QueryProvider from "@/components/providers/QueryProvider"; 
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* 2. Bungkus {children} dengan Provider */}
        <QueryProvider>
          {children}
        </QueryProvider>
      </body>
    </html>
  );
}

Cek Hasilnya ✅

Coba jalankan server npm run dev. Liat di pojok kanan bawah browser lo.

Ada logo kecil (biasanya bunga merah/kuning)?

Kalau Ada: Selamat! React Query udah aktif.
Kalau Gak Ada: Cek lagi langkah nomor 3, pasti lupa ke-save atau salah import.

Apa & Kenapa?Fetching Data