SuperAPI AI 工具集

tanstack-query-setup

前端与建站

查看项目

更新于 10-16 07:56

技能介绍

用途:在 React 与 Next.js 项目中实现 TanStack Query(React Query),用其管理服务端状态,包括缓存、后台更新与乐观 UI。

安装:npm install @tanstack/react-query @tanstack/react-query-devtools

主要能力:通过 QueryClient 与 QueryClientProvider 完成配置(含 staleTime、gcTime、retry、refetchOnWindowFocus 等默认选项),并在 Next.js App Router 中以 Providers 包裹布局;用 useQuery 定义数据获取钩子,支持带参数查询、过滤器查询(placeholderData 保留旧数据);用 useMutation 处理新增、更新、删除,并通过 invalidateQueries、setQueryData、removeQueries 维护缓存;实现乐观更新(onMutate 快照、onError 回滚、onSettled 失效重取);用 useInfiniteQuery 实现游标或偏移分页与无限滚动(配合 IntersectionObserver)。还包含查询工厂 queryOptions 组织 queryKey、鼠标悬停预取、服务端组件中 prefetchQuery 配合 dehydrate 与 HydrationBoundary 做 SSR 注水、依赖查询与 useQueries 并行查询。

使用方式:按核心工作流依次安装配置、创建查询、添加变更、启用缓存、实现乐观更新、添加无限查询;官方给出 Next.js App Router 的 Provider 设置示例及查询、变更、乐观更新、无限查询等代码结构。

适用场景:需要加载、缓存、同步和修改服务端数据的 React 应用,尤其是列表分页、无限滚动、表单提交与实时反馈场景。

限制:资料为技术实现参考,未提供收费、价格、平台或效果数据;示例基于 React 与 Next.js,其他框架适配情况暂未提供。