如何更新 React Query 已获取的数据，以便我不必重新获取所有数据？

Question

目前，我的代码如下所示。当突变成功时，我必须重新获取所有数据，因为tasks不会更新。tasks提交或删除任务时如何更新客户端？

  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(),
  })

聚苯乙烯

useContext()除非你想每次都重新获取数据，否则使用比调用 refetch 函数更好。

const utils = api.useContext()

  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()
  })

Answer 1

我自己想出了解决办法。我使用 tRPC，它提供了自己的回调函数setData()来改变缓存。tRPC 是 React-Query 的包装器。

这样，当数据库突变成功时，我也可以突变缓存。

现在我必须像Zustandless 一样使用全局状态管理器！

  const { data: sessionData } = useSession()

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

  const utils = api.useContext()

  const createTask = api.task.create.useMutation({
    onSuccess: newTask => {
      utils.task.getAll.setData(undefined, prevTasks => {
        if (prevTasks === undefined) return [newTask]
        console.log([...prevTasks, newTask])
        return [...prevTasks, newTask]
      })
    },
  })

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

  const deleteTask = api.task.delete.useMutation({
    onSuccess: deletedTask => {
      utils.task.getAll.setData(undefined, prevTasks => {
        const tasksWithoutDeletedTask = prevTasks?.filter(
          task => task.id !== deletedTask.id
        )
        console.log(tasksWithoutDeletedTask)
        return tasksWithoutDeletedTask
      })
    },
  })