如何更新React Query已获取的数据，避免重新获取全部数据？

当前代码中，执行创建或删除任务的mutation后，需要手动调用refetchTasks()重新获取全部数据，因为Tasks不会自动更新。以下是两种可行的更新方式：

方式一：手动调用refetch重新拉取数据 #

这是你当前使用的方式，在mutation成功后直接触发全量数据重新获取：

const { data: sessionData } = useSession()

const {
  data: tasks,
  refetch: refetchTasks,
} = api.task.getAll.useQuery(undefined, {
  enabled: sessionData?.user !== undefined,
})

const createTask = api.task.create.useMutation({
  onSuccess: async () => await refetchTasks(),
})

const createTaskValues = (values: { title: string }) =>
  createTask.mutate({ title: values.title })

const deleteTask = api.task.delete.useMutation({
  onSuccess: async () => await refetchTasks(),
})

方式二：使用API Context的invalidate方法（更优方案） #

如果不想每次都重新全量拉取数据，推荐使用api.useContext()获取工具实例，通过invalidate()让对应查询的缓存失效，触发自动更新：

const { data: sessionData } = useSession()
const utils = api.useContext()

const {
  data: tasks,
} = api.task.getAll.useQuery(undefined, {
  enabled: sessionData?.user !== undefined,
})

const createTask = api.task.create.useMutation({
  onSuccess: () => utils.task.getAll.invalidate()
})

const createTaskValues = (values: { title: string }) =>
  createTask.mutate({ title: values.title })

const deleteTask = api.task.delete.useMutation({
  onSuccess: () => utils.task.getAll.invalidate()
})

补充说明：invalidate()会标记该查询的缓存为失效状态，后续组件会自动重新获取最新数据，相比直接调用refetch，这种方式更符合缓存管理的最佳实践，避免不必要的重复请求触发时机问题。

内容的提问来源于stack exchange，提问作者circular_reference