reactjs - 执行突变后的 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

这并不是真正的 react 查询特定的。在您的 setQueryData 代码中，您将 data 设置为包含两个条目的数组:

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

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

覆盖会是这样的:

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

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

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

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

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