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-queryDevtools:
npm install @tanstack/react-query-devtoolsQueryClient
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
QueryClientpé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.