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 现在为真。有了上面的内容，似乎在缓存中添加了一个新行

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

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

谢谢

Answer 1

这并不是真正的 react-query 特定的。在您的 setQueryData 代码中，您将 data 设置为具有两个条目的数组：

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

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

覆盖将是这样的：

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

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

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

这基本上就是找到 answer 的工作流。

如果您实现 onSuccess，您将在变更成功之后更新缓存，这也是一个合法的用例，尽管有所不同。在这里，您不需要返回任何内容，它会更类似于 comment 示例。

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

1 个答案: