执行突变后的 React-Query 更新缓存

Question

我对 react-query 有点迷茫。本质上，我有一个 useQuery 从我的数据库中获取用户。他们的详细信息已添加到表单中，他们可以更新和提交。

我遇到的问题是更新是针对不同的数据库完成的。稍后将批量更新主数据库。因此，我不需要重新获取初始数据，而是需要使用 setQueryData 来更新缓存版本。

queryClient = useQueryClient()

const { mutate } = useMutation(postUser, {
    onSuccess: async (response) => {
        console.log(response)

        queryClient.cancelQueries('user');
        const previousUser = queryClient.getQueryData('user');
        console.log(previousUser)
        queryClient.setQueryData('user', {
            ...previousUser,
            data: [
              previousUser.data,
              { '@status': 'true' },
            ],
          })
        return () => queryClient.setQueryData('user', previousUser)
    }
})

目前我有类似上述的东西。所以它调用 postUser 并得到响应。响应看起来像这样

data:
    data:
        user_uid: "12345"
        status: "true"
        message: "User added."
        status: 1

然后我getQueryData为了获取数据的缓存版本，目前看起来像这样

data:
    @userUuid: "12345"
    @status: ""
message: "User found."
status: 1

所以我需要将缓存版本@status 更新为 true。有了上面的内容，它似乎在缓存中添加了一个新行

data: Array(2)
    0: {@userUuid: "12345", @status: ""}
    1: {@status: "true"}
message: "User found."
status: 1

那么如何在不添加新行的情况下覆盖现有行？

谢谢

Answer 1

这并不是特定于反应查询的。在您的 setQueryData 代码中，您将 data 设置为包含两个条目的数组：

data: [
  previousUser.data,
  { '@status': 'true' },
],

第一个条目 = previousUser.data 第二个条目 = { '@status': 'true' }

覆盖将是这样的：

queryClient.setQueryData('user', {
  ...previousUser,
  data: {
    ...previousUser.data,
    '@status': 'true',
  },
})

另一方面，您似乎将 onMutate 回调与 onSuccess 回调混为一谈。如果你想进行乐观更新，你可以像上面那样以类似的方式实现 onMutate 函数：

取消传出查询
设置数据
return 可以调用的“回滚”函数onError

这基本上就是找到的工作流程 here in the docs。

如果您实施 onSuccess，您将在变更成功后 更新缓存，这也是一个合法的用例，尽管有所不同。在这里，您不需要 return 任何东西，它会更类似于 updates from mutation responses 示例。

执行突变后的 React-Query 更新缓存

React-Query update cache after mutation performed

reactjs

react-query