React Query 实践

在 Vine项目中，我们使用 React Query 来管理所有的接口请求。

1. 核心功能

• 自动缓存 (Caching)：请求过的数据会被缓存，下次直接用。
• 自动去重 (Deduping)：同一时间发起的多个相同请求，只会真正发送一次。
• 后台更新 (Background Refetch)：当你切回窗口或数据过期时，它会偷偷在后台更新数据。
• 过期管理 (Stale Time)：可以设置数据多久算“脏”，在有效期内不会发起网络请求。
• 分页/加载更多：内置了分页和无限滚动（Infinite Scroll）的支持。
• 失败重试：接口挂了自动重试 3 次（默认）。

2. 核心用法

日常开发只需掌握这两个 API：

2.1 useQuery（查）

用来获取数据（GET）。

const { data } = useQuery({
  // 1. 缓存 Key：类似 Map 的 Key，Key 变了会自动重新请求
  queryKey: ['todos', { status: 'done' }],

  // 2. 请求函数：必须返回一个 Promise
  queryFn: () => fetch('/api/todos').then((res) => res.json())
})

2.2 useMutation（增删改）

用来修改数据（POST / PUT / DELETE）。

const queryClient = useQueryClient()

const { mutate } = useMutation({
  mutationFn: (newTodo) => axios.post('/todos', newTodo),

  // 接口调用成功后的回调
  onSuccess: () => {
    // ⚡️ 核心技巧：让 'todos' 的缓存失效
    // 这样 React Query 会自动重新拉取最新列表，界面就自动刷新了
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    toast.success('添加成功')
  }
})

// 使用：绑定到按钮点击事件
;<button onClick={() => mutate({ title: '吃饭' })}>提交</button>

3. 总结

1. 查数据用 useQuery。
2. 改数据用 useMutation。
3. 改完记得 invalidateQueries 刷新列表。