执行突变后 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按照与上面类似的方式实现该函数：

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

这基本上是文档中的工作流程。

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