← 返回首页

React Query useQuery

queryKey 工厂、无限列表、条件详情、乐观更新、缓存失效。

缓存面板

再点同一用户详情应立刻出现;失效/清空后才会重新转圈。

2
总查询
2
users 查询
fetching
当前状态

useInfiniteQuery 列表

加载中…

useQuery 详情(enabled)

点左侧用户查看详情。悬停会 prefetch。

useMutation 创建用户

useUsers / useInfiniteUsers / useUser 都走同一套 userKeys。改一条详情会invalidateQueries(lists),列表和无限滚动一起刷新;删除会先改 cache 再在失败时回滚。

这是客户端 Query Cache,和 /shop 的 Next.js Data Cache / 页面缓存不是一层。后者跨用户共享,这里只活在当前浏览器的 QueryClient 里。