Learning
TanStack Query

Alap beállítás

Telepítés, QueryClient, QueryClientProvider.

Alap beállítás

Telepítés

npm install @tanstack/react-query
# vagy
yarn add @tanstack/react-query
# vagy
pnpm add @tanstack/react-query

Devtools:

npm install @tanstack/react-query-devtools

QueryClient

A QueryClient az „agy": cache, fetch-ek, query állapotok.

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient()

Alapbeállítások:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
      retry: 2,
      refetchOnWindowFocus: true,
    },
    mutations: {
      retry: 0,
    },
  },
})

QueryClientProvider

Context wrapper az egész app körül:

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

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* a teljes app */}
    </QueryClientProvider>
  )
}

Mindig egy QueryClient példány az appra; ne hozd létre komponensen belül.


📝 Összefoglaló

  • Telepítés: @tanstack/react-query (+ Devtools külön).
  • QueryClient = cache és lekérések központja.
  • QueryClientProvider = Context wrapper; a fa tetejére kerül.
  • Alapbeállításokban szabályozhatod staleTime, retry, refetch viselkedést.

On this page