React-query optimistic update on mutation

Question

everyone! I'm new to react-query and I was trying to make an optimistic update, using mutation function, but faced a problem, that I can not fetch a previous value from the query. What am I doing wrong?

previousCurrentPost - always return a value, that already been updated

My onMutate func:

{
      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 }
      }

Try this const previousCurrentPost = {...queryClient.getQueryData(['currentPost'])} — Vitaliy Rayets
– Vitaliy Rayets, Commented Feb 15, 2022 at 15:38
Try with deep clone const previousCurrentPost = JSON.parse(JSON.stringify(queryClient.getQueryData(['currentPost']))) — Vitaliy Rayets
– Vitaliy Rayets, Commented Feb 16, 2022 at 8:07

anonkey · Accepted Answer · 2022-02-15 21:36:40Z

1

It's because { ...oldPost } only do a shallow copy not a deep copy .

So oldPost.state and updated.state are the same object and when you do your assignment it's updating in oldPost and in updated

answered Feb 15, 2022 at 21:36

anonkey

1024 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vladimir Kosenko Over a year ago

true, thanks for help

TkDodo Over a year ago

please use immer if you want to mutate data structures. In everything React, it is better to work immutably.

Collectives™ on Stack Overflow

React-query optimistic update on mutation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related