Tutorial React TanStack Query #4: Install dan Konfigurasi TanStack Query

• Langkah 1 - Installasi TanStack Query
• Langkah 2 - Konfigurasi QueryClient dan QueryClientProvider
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita semua telah belajar bagaimana cara install dan konfigurasi React Router di dalam project React. Dan pada artikel kali ini, kita semua akan belajar bagaimana cara install dan konfigurasi TanStack Query di dalam project React.

Langkah 1 - Installasi TanStack Query

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project React-nya.

npm install @tanstack/react-query@5.72.1

Silahkan tunggu proses installasinya selesai dan pastikan terhubung dengan internet.

Langkah 2 - Konfigurasi QueryClient dan QueryClientProvider

QueryClient adalah jantung dari TanStack Query. Semua proses manajemen data yang dilakukan oleh TanStack Query seperti fetching, caching, updating, invalidating, refetching, hingga pengaturan retry ketika error dikontrol oleh QueryClient.

Agar semua component React kita bisa menggunakan fitur dari TanStack Query, kita perlu membungkus aplikasi dengan QueryClientProvider.

Silahkan buka file src/main.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router';

//import QueryClient dan QueryClientProvider dari react-query
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

//init QueryClient
const queryClient = new QueryClient()

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </BrowserRouter>
  </StrictMode>,
)

Dari perubahan kode di atas, pertama kita import QueryClient dan QueryClientProvider dari TanStack Query.

//import QueryClient dan QueryClientProvider dari react-query
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

Kemudian kita inisialisasi query client-nya.

//init QueryClient
const queryClient = new QueryClient()

Setelah itu, kita bungkus component App di dalam QueryClientProvider.

<QueryClientProvider client={queryClient}>

	<App />
	
</QueryClientProvider>

Dengan begini, seluruh component child dari <App /> bisa menggunakan fitur useQuery, useMutation, dan lain-lain dari TanStack Query.

Kesimpulan

Pada artikel ini, kita telah belajar cara menginstal dan mengkonfigurasi TanStack Query di project React. Prosesnya cukup sederhana, yaitu menginstal package @tanstack/react-query, kemudian membuat instance QueryClient dan membungkus aplikasi dengan QueryClientProvider.

Pada artikel selanjutnya, kita semua akan belajar melakukan proses data fetching menggunakan useQuery dari TanStack Query di React.

Terima Kasih