Using QueryMutation and QueryObserver outside React, acting as Actors for XState

[VanTanev]

Hello.

I am experimenting with using react-query in an unconventional manner, where it's used outside a react context.

This is a WIP TodoMVC written with react query and XState: https://codesandbox.io/s/xstate-react-query-s9kxb?file=/src/todosMachine.ts

One thing that I ended up doing is writng a lot of code like this for the different mutations (edit, create, delete, etc...):

createMachine({
  invoke: {
      {
        id: "todos-creator",
        src: () => (sendBack, onReceive) => {
          let obs = new MutationObserver<
            Todo,
            unknown,
            { title: string; completed?: boolean },
            { optimisticTodo: Todo }
          >(queryClient, {
            mutationFn: todosApi.create,
            onMutate: async (todo) => {
              await queryClient.cancelQueries("todos");
              const optimisticTodo: Todo = {
                id: uuid(),
                title: todo.title,
                completed: todo.completed ?? false
              };
              queryClient.setQueryData<Todo[]>("todos", (todos = []) => [
                ...todos,
                optimisticTodo
              ]);

              return { optimisticTodo };
            },
            onSuccess: (newTodo, _, { optimisticTodo }) => {
              queryClient.setQueryData<Todo[]>("todos", (todos = []) => {
                console.log("success", {
                  newTodo,
                  optimisticTodo,
                  todos: queryClient.getQueryData("todos")
                });

                return todos.map((todo) =>
                  todo.id === optimisticTodo.id ? newTodo : todo
                );
              });
            },
            onError: (error, _, context) => {
              queryClient.setQueryData<Todo[]>("todos", (todos = []) =>
                todos.filter((todo) => todo.id !== context?.optimisticTodo?.id)
              );
            }
          });

          onReceive((event) => {
            if (isEvent(event, "CREATE_TODO")) {
              obs.mutate(event.todo);
            }
          });
        }
      },
  }
})

Repeating this for every type of CRUD mutation feels ineffective. Is there a better approach?

Additionally, is there a material difference between the above and something that doesn't use MutationObserver, but instead is just a promise with a try/catch that interacts with the query cache:

createMachine({
  invoke: 
      {
        id: "todos-creator",
        src: () => (sendBack, onReceive) => {
          const mutate = async (todo: {
            title: string;
            completed?: boolean;
          }) => {
            await queryClient.cancelQueries("todos");
            const optimisticTodo: Todo = {
              id: uuid(),
              title: todo.title,
              completed: todo.completed ?? false
            };
            queryClient.setQueryData<Todo[]>("todos", (todos = []) => [
              ...todos,
              optimisticTodo
            ]);

            try {
              let newTodo = await todosApi.create(todo);
              queryClient.setQueryData<Todo[]>("todos", (todos = []) => {
                return todos.map((todo) =>
                  todo.id === optimisticTodo.id ? newTodo : todo
                );
              });
              return newTodo;
            } catch (error) {
              queryClient.setQueryData<Todo[]>("todos", (todos = []) =>
                todos.filter((todo) => todo.id !== optimisticTodo.id)
              );
            }
          };

          onReceive(async (event) => {
            if (isEvent(event, "CREATE_TODO")) {
              mutate(event.todo);
            }
          });
        }
      },
})