"TanStack Query 5 数据获取与缓存策略实践"

TanStack Query 5 数据获取与缓存策略实践概述TanStack Query 5 提供声明式的请求与缓存管理，自动处理并发、重试与失效。本文示例基于稳定 API，适配 SPA 与 SSR 场景。基础配置与查询import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' const qc = new QueryClient({ defaultOptions: { queries: { staleTime: 60_000, gcTime: 10 * 60_000, retry: 2, }, }, }) function Products() { const { data, isLoading } = useQuery({ queryKey: ['products'], queryFn: async () => (await fetch('/api/products')).json(), }) if (isLoading) return <p>Loading…</p> return <ul>{data.map((p: any) => <li key={p.id}>{p.title}</li>)}</ul> } 失效与预取import { useQueryClient } from '@tanstack/react-query' function PrefetchButton() { const qc = useQueryClient() return <button onClick={() => qc.prefetchQuery({ queryKey: ['products'] })}>预取</button> } 使用 `prefetchQuery` 提前填充缓存，结合 `staleTime` 控制失效策略。SSR 与水合// 服务器：填充状态并注入 import { dehydrate } from '@tanstack/react-query' const state = dehydrate(qc) // 客户端：水合 import { Hydrate } from '@tanstack/react-query' <QueryClientProvider client={qc}> <Hydrate state={state}> <App /> </Hydrate> </QueryClientProvider> 验证要点API 与行为基于 v5 稳定版本；在 SPA/SSR 场景可直接运行。通过网络与缓存面板验证命中率、失效与预取效果，指导策略调整。