对突变的反应查询乐观更新

Question

大家好！我是 react-query 的新手，我试图使用变异函数进行乐观更新，但遇到了一个问题，我无法从查询中获取以前的值。我做错了什么？

previousCurrentPost - 总是return一个已经更新的值

我的 onMutate 函数：

{
      onMutate: async (postOrComment: any, emojiType?: string) => {

      
        await queryClient.cancelQueries(['currentPost'])

        // Snapshot the previous value
        const previousCurrentPost = queryClient.getQueryData(['currentPost'])


        // Optimistically update to the new value
        queryClient.setQueryData(['currentPost'], (oldPost: any) => {
          const updated = { ...oldPost }
         
          updated.state.is_liked = !oldPost.state.is_liked
          updated.stat.like_count = postOrComment.state.is_liked
            ? oldPost.stat.like_count + 1
            : oldPost.stat.like_count - 1
          if (emojiType) {
            updated.state.like_emoji = emojiType
          }
          return updated
        })
        
        return { previousCurrentPost }
      }

Answer 1

因为{ ...oldPost }只做浅拷贝，不做深拷贝。

所以 oldPost.state 和 updated.state 是同一个对象，当您进行分配时，它会在 oldPost 和 updated

中更新

对突变的反应查询乐观更新

React-query optimistic update on mutation

javascript

reactjs

react-hooks

react-query