React Query 基础回顾

先说说React Query其实就是帮你把网络请求和缓存的事儿全搞定。

不用再写一堆 useState + useEffect，直接用 useQuery 把数据拉进来。

说实话，它的默认配置Yi经够用，但想要玩儿出花样，就得自己动手调点参数。

比如把 staleTime 拉长，数据就不会频繁重新请求，用户体验立马提升。

缓存是关键。咱们Ke以把常用的列表、详情页分别设不同的 queryKey。

别忘了 cacheTime，它决定了多久不使用后才会被清理。

Ru果你们项目里有「热点」数据，比如用户信息，那就把 staleTime 设成几分钟甚至geng久。

反之，实时性要求高的订单状态，就Ke以设成 0，让它每次dou去服务器验证。

还有个技巧：手动失效。在 mutation 成功后用 queryClient.invalidateQueries 把相关缓存标记为过期，下次组件渲染时自动刷新。

传统分页：{ offset, limit } 直接当作 queryKey 的一部分。

# 那么翻页时 React Query 会自动为每一页创建独立缓存——回到上一页根本不用再请求。

# Ru果你想要无限滚动，用 useInfiniteQuery.

# getNextPageParam 返回下一个 offset，fetchNextPage 拉新页数据，然后合并到一起显示。

# 小心别一次性拉太多，否则会占内存，你懂的，适度就好。

Aha！写完数据后马上想让页面同步，这时候就Ke以玩乐观geng新了。

onMutate 里先把本地缓存改掉，让 UI kan起来像Yi经成功了。

# 再用 .setQueryData, 把新数据塞进去。

# 要是请求失败了用返回的快照在 onError) 里回滚。

# Zui后在 onSettled) 再一次 invalidate，让服务器的数据重新同步回来确保一致性。

# 有些业务需要实时进度，比如任务队列、订单状态，这时候就别硬刷，而是用动态轮询。

# 把 refetchInterval) 设置成函数，根据当前返回的数据判断是否活跃：

useQuery({
  queryKey: ,
  queryFn: fetchQueue,
  refetchInterval: q => q.data?.active ? 5000 : 30000
})

# 活跃时每5秒一次不活跃时降到30秒，大幅降低服务器压力。

# 开发阶段打开 React Query Devtools，Nengkan到每个 query 的状态、缓存大小，一眼kan穿问题根源。

# 再配合浏览器的 Network 面板，kan哪些请求真的走了网路，哪些是命中缓存。

# 别忘了在生产环境关闭 devtools，否则会泄露内部实现细节，还可Neng影响性Neng呢。

问： 我的博客文章经常在搜索结果里找不到，怎么回事？ 答： 百度爬虫对 JavaScript 渲染的页面支持相对有限。Ru果你的页面主要靠 React Query 动态加载数据，而没有提供 SSR 或预渲染的 HTML 内容，爬虫可Neng抓不到实际文字。解决办法Ke以考虑：

- 使用 Next.js 的 SSR/SSG，把关键内容提前渲染出来；

- 在 `` 中加入 `` 确保没有误封禁；

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      cacheTime: 300_000,
      retry: 1,
      refetchOnWindowFocus: false
    }
  }
})