Question about optimistic updates / freezing

[sebgauthier]

I have a question regarding optimistic updates... Given the following mutation (removing a user from a list)

  const [deleteUserMutation] = useMutation(deleteUser, {
    onMutate: (user) => {
      const previousValue = queryCache.getQueryData('users')
	  
	  // using immer to produce a new array with the user removed
      const newUsers = produce(previousValue, (draft) => {
        draft.splice(
          draft.findIndex((u) => u.id === user.id),
          1,
        )
      })
	  
	  // optimiscally update the cache with the removed user
      queryCache.setQueryData('users', newUsers)
	  
      return previousValue
    },

    // After success or failure, refetch the query
    onSettled: () => {
      queryCache.refetchQueries('users')
    },
  })

The issue is that some other component receives the users as prop and sorts it, which does not work when the cache is updated via setQueryData (it seems to be freezing the array). The component re-renders and I get an 'TypeError: Cannot assign to read only property '0' of object '[object Array]':

users.sort((u1, u2) => u1.username.localeCompare(u2.username))

Is this expected? How would I best handle this? Making a copy of the array and passing this to the component? If I comment out the setQueryData part (basically removing optimistic update) everything works fine.

Thanks for your time! (loving react-query btw, it's so good)

[tannerlinsley]

This seems like it should work just fine, which tells me only one thing... we need a codesandbox for this use case to test it out in an isolated env. Would you be able to do that?

[sebgauthier]

You can ignore all this, I swear I had checked the result from immer, but the produce method is what's freezing the array. Carry on. My bad.

[tannerlinsley]

No worries :)