useQuery 和 useMutation 有什么区别？分别适合什么场景？

useQuery 用来读数据，useMutation 用来改数据。读数据通常自动执行、会按 queryKey 缓存，并处理 loading、error、重试和后台刷新；改数据不会因为组件渲染就自动执行，需要调用 mutate，成功后通常 invalidateQueries 让相关列表重新获取，或者做乐观更新。

追问

为什么 useMutation 不像 useQuery 那样自动缓存？

因为写操作的重点不是展示“这次提交的返回值”，而是让服务器状态发生变化。变化后要么让相关 query 失效重新拉取，要么手动更新缓存。

提交表单应该用哪个？

用 useMutation。表单提交是创建或更新资源，应该由用户动作触发，而不是组件一挂载就执行。

删除一条数据后列表怎么刷新？

常见做法是在 onSuccess 里调用 queryClient.invalidateQueries，让列表 query 重新获取。体验要求高时可以先做乐观删除，失败再回滚。

queryKey 在 useQuery 里为什么重要？

它决定缓存身份。列表、详情、筛选条件都应该进 queryKey，否则容易拿到旧数据或串数据。

写段代码

javascript
const todos = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });

const addTodo = useMutation({
  mutationFn: createTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
});

addTodo.mutate({ title: 'learn query' });