SuperAPI AI 工具集

tanstack-query

前端与建站

查看项目

更新于 10-15 17:20

技能介绍

用途:TanStack React Query(@tanstack/react-query)在 React 应用中管理服务端状态,涵盖数据获取、缓存、变更、乐观更新与分页等场景。

主要能力与用法:

  1. 配置:在客户端组件中使用 QueryClientProvider 包裹应用,可设置 staleTime、gcTime、refetchOnWindowFocus、retry 等默认项,并接入 ReactQueryDevtools。
  2. 查询键:集中维护 queryKeys,按 all/lists/list/details/detail 分层组织,便于失效与复用。
  3. 基础与单条查询:用 useQuery 配合 queryFn 获取数据,通过 isLoading、error、data 处理状态;单条查询可用 enabled 控制是否发起请求,404 时可返回 null。
  4. 变更:用 useMutation 提交 POST/PATCH/DELETE,成功后调用 invalidateQueries 刷新相关键。
  5. 乐观更新:在 onMutate 中 cancelQueries、快照旧数据并 setQueryData 预更新,onError 回滚,onSettled 再失效刷新;删除时也可在列表上先移除项。
  6. 无限查询:用 useInfiniteQuery 配合 initialPageParam、getNextPageParam 实现游标分页与“加载更多”。
  7. 预取:在链接 hover 时用 prefetchQuery 提前拉取详情数据。

适用场景:需要在 React 前端统一处理请求缓存、变更与列表分页的界面。

限制:资料仅展示示例代码与模式,未提供版本、依赖安装命令、平台或收费信息,暂未提供。