what would be the thoughts on making optimistic mutations the default?

[AlexFrazer]

It's generally well accepted that optimistic updates is a strong UI pattern. While react-query does have good support for optimistic updates, I would wonder if there's any better DX for making it feel like a "default behavior".

Currently it appears the steps are basically:

• Share a ReactQueryCacheProvider with the common ancestor of each component
• In the mutator:
  1. set up an onMutate in the useMutation
     • cancel existing queries to the proposed query key
     • add the proposed entity into the queryCache
     • return a function which will roll back the transaction.
  2. invalidate the existing query onSuccess to trigger a refetch.
  3. notify onError that the update has failed.

My code looks something like this:

const [mutate] = useMutation(addTodo, {
    onMutate: (newTodo) => {
      queryCache.cancelQueries("todos");
      queryCache.setQueryData("todos", [...todos, newTodo]);
      return () => {
        const state = queryCache.getQueryData<Todo[]>("todos");
        if (state) {
          remove(state, { id: newTodo.id });
          queryCache.setQueryData("todos", draft);
        }
      };
    },
    onSuccess: () => {
      queryCache.invalidateQueries("todos");
    },
    onError: () => {
      toast({
        title: "Message failed to send",
        status: "error"
      });
    }
  });

I can abstract this into a custom hook, yes, but it does seem a little... not ideal. I would wonder if there would be a concept in the lib of useOptimisticMutation. Perhaps a high level config could be provided to tell it what it means to optimistically update, maybe being provided a function to rollback changes and a generic function for onSuccess/onError

Of course, I am by no means an expert on this. It was just a thought while using the library. Any thoughts?

[TkDodo]

As you said, I think it's fairly easy to extract that to a custom useOptimisticMutation hook. the main issue would be that manipulating the query cache manually is different for every query, so you'd need to pass a custom function to handle that.