Question

我想更新数据库中的记录。到目前为止，EditTodoList 正在完美地更新数据库中的相应记录。我的问题是乐观更新部分，更改仅在重新获取 "TODO_LIST"+projectId 查询后显示，即使我拥有的此 useMutation 设置应该立即反映在用户界面中的更改。

我在创建 todoList 时没有遇到这个问题，因为在 onMutate 中我只需要执行此 queryClient.setQueryData("TODO_LIST"+projectId,(old)=>[...old,newTodoList])，但在这种情况下我需要更改 old 数组。

return useMutation(
    EditTodoList,
    {
      onSuccess:(newProject)=>queryClient.setQueryData("TODO_LIST"+projectId,(old)=>[...old,newProject]),

      onMutate:(values)=>{
         const {title,projectId,todos,todoListToBeEdited}=values
         queryClient.cancelQueries("TODO_LIST"+projectId)

         const previousData=queryClient.getQueryData("TODO_LIST"+projectId)

         //update query data
         let temp=[...previousData]
         const targetTodoList=temp.filter(tds=>tds.id === todoListToBeEdited.id)[0]
         const targetTodoListIndex=temp.indexOf(targetTodoList)
     
         const newTodoList =  TodoListModel(projectId,title,todoListToBeEdited.orderInProject)
     
         temp[targetTodoListIndex] = newTodoList
     
         //this is where I need help , the setQueryData seems to ignore temp even though temp has the latest up-to-date data  
         queryClient.setQueryData("TODO_LIST"+projectId,(old)=>[...temp])
         return  queryClient.setQueryData("TODO_LIST"+projectId,previousData)
      },

      onError:(err,values,rollBack)=>rollBack()
    }
)

Answer 1

建议的方法是：

在 onMutate 中使用 setQueryData 进行乐观更新。如果您有一个列表，是的，这意味着迭代该列表并找到要更新的正确元素。
返回一些东西来回滚
错误回滚
invalidate onSettled 以在任何情况下重新获取查询以与服务器状态同步。这是可选的，如果您的乐观更新是“完美的”（例如只是切换一个布尔值），则有时不需要这样做。

有一整节关于乐观更新in the docs，还有codesandbox examples

/edit：抱歉，我错过了关于 setQueryData 的评论。如果您已经计算了下一个数据，则不需要使用功能更新程序。这应该有效：

queryClient.setQueryData("TODO_LIST"+projectId, temp)

如何使用 useMutation 乐观地更新数据

1 个答案: