Optimistic Updates

[gmwill934]

I have a custom hook, that changes a boolean based on the current (!value).

export const useChangeStatus = () => {
  return useMutation<ITodo, AxiosError<any>, any>(
    async (id: string) => {
      const { data } = await axios.patch(`/todo/${id}/status`);
      return data;
    },
    {
      onMutate: (values) => console.log(values),
    }
  );
};

Hook call

const [mutateStatus] = useChangeStatus();
  const handleTodoChangeStatus = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    // changeStatus
    mutateStatus(todo.id, {
      onSuccess: () => queryCache.invalidateQueries('todos'),
    });
  };

I'd like to optimistically update my UI (checkbox input) without waiting for my server. The thing is, I'm not passing a boolean value that I could use in order to handle the update.

Is there a way around this? Or is it preferable to change the logic on my server?

RQ is 🔥, completely in ❤️

[TkDodo]

I'd like to optimistically update my UI (checkbox input) without waiting for my server. The thing is, I'm not passing a boolean value that I could use in order to handle the update.

I am not sure why that matters. I think you want to just toggle the state depending on the id? Something like:

onMutate: (id) => {
    queryCache.setQueryData('todos', previousTodos => ({
        previousTodos.map(todo => todo.id === id ? { ...todo, someValue: !todo.someValue } : todo)
    })
}

something like this would toggle someValue inside your todos list on the entry that matches the id. This of course assumes that you only have a list of todos in your cache, not separate todos under a different query key.