Learn TanStack - Query & Data Fetching

#Introduction

Now that the setup is done in episode 3, this is the moment you've been waiting for: writing your first query. TanStack Query turns the repetitive useEffect data-fetching ritual into a single hook that tracks status, cache, and synchronization automatically.

Episode 4 dissects QueryClientProvider, the useQuery hook, the statuses it returns, staleTime and gcTime settings, error handling with retry, and background refetching. All the concepts from episode 2 are now put into practice.

By the end of this episode, you'll understand the query workflow at the component level and know how to configure the cache so your app feels fast without extra work.

#QueryClient and QueryClientProvider

#Wrapping the App with the Provider

queryClient is created once and injected into the component tree through QueryClientProvider. Without this provider, every useQuery will fail.

main.tsx dengan QueryClientProvider

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App"
 
const queryClient = new QueryClient()
 
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
)

<QueryClientProvider client={queryClient}> wraps the entire app. From now on, all query hooks inside this tree share the same cache.

#The useQuery Hook and Its Statuses

#Reading the Query Status

useQuery accepts a configuration object with queryKey and queryFn, then returns status and data:

Hook useQuery pertama

import { useQuery } from "@tanstack/react-query"
 
function Todos() {
  const { data, isPending, isError, error } = useQuery({
    queryKey: ["todos"],
    queryFn: async () => {
      const res = await fetch("/api/todos")
      if (!res.ok) throw new Error("Gagal memuat todos")
      return res.json()
    },
  })
 
  if (isPending) return <p>Memuat todos...</p>
  if (isError) return <p>Error: {error.message}</p>
 
  return <ul>{data.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>
}

queryKey: ["todos"] is the query's identity — unique and the basis of the cache. queryFn returns a promise; when it resolves, the result enters the cache. The isPending status means there's no data yet, and isError means an error occurred.

#Why queryKey Matters

Two components using an identical queryKey share one query and one cache. That's deduplication: the same request is never sent twice, and data is immediately available to the second component without loading.

#staleTime, gcTime, and Refetching

#Stale Data vs. Removed Data

staleTime determines how long data is considered fresh (no refetch needed). gcTime determines how long data stays in the cache after it's no longer used. These two are often confused:

Kontrol cache dengan staleTime dan gcTime

const { data } = useQuery({
  queryKey: ["profil"],
  queryFn: ambilProfil,
  staleTime: 60_000,
  gcTime: 5 * 60_000,
})

With staleTime: 60_000, within one minute data is served directly from the cache with no new request. gcTime: 5 * 60_000 keeps the data alive for five minutes after the component unmounts.

#Background Refetching

By default, a stale query is refetched every time the window regains focus and when the connection comes back online. This behavior can be tuned with refetchOnWindowFocus and refetchOnReconnect. As a result, data stays in sync without a manual refresh button.

#Error Handling and Retry

#Retry with Backoff

When the queryFn throws an error, TanStack Query retries with delays that grow exponentially. You can control the number of attempts and the delay:

Mengatur retry dan refetch manual

const { data, refetch } = useQuery({
  queryKey: ["cekout"],
  queryFn: ambilCekout,
  retry: 3,
  retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30_000),
})
 
return (
  <button onClick={() => refetch()}>Muat ulang</button>
)

retry: 3 limits the retry to three attempts. retryDelay computes an exponential delay with a maximum cap of 30 seconds. refetch is called manually from the button, forcing the query to fetch again right now.

#React Query DevTools

#Seeing the Cache and Status Visually

TanStack Query ships with devtools that show all queries, their statuses, cached data, and buttons to test refetch and invalidate:

Aktifkan React Query DevTools

import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

<ReactQueryDevtools /> adds a panel in the corner of the browser. From this panel you can see the effective staleTime, test invalidation, and inspect the cache contents — very useful when debugging in episode 14.

#Conclusion

Episode 4 wrapped up the data fetching foundation: wrapping the app with QueryClientProvider, reading data through useQuery with the isPending and isError statuses, tuning staleTime and gcTime, handling errors with retry, and monitoring everything with React Query DevTools.

Key takeaways:

• QueryClient is created once and injected through QueryClientProvider.
• queryKey is the query's identity and the basis of deduplication.
• staleTime controls data freshness; gcTime controls cache lifetime.
• Background refetching runs when the window focuses or the connection returns.
• retry and retryDelay control retries on error.
• React Query DevTools shows the status of every query.

In the next episode, episode 5, we'll discuss data mutations and optimistic updates — useMutation for changing data, query invalidation after a mutation, optimistic updates with rollback, and paginated data with infinite scrolling using useInfiniteQuery. Get your belajar-tanstack app ready, because we're about to write our first mutation!