Staying DRY and organised with react-query and CRUD operations

[rocketman101]

I've recently discovered react-query and really like the query side of things. But I'm having trouble getting my head around the best way to organise mutations in an app that does a lot of data updating. Consider the following approach to exposing some operations:

export const toDoService = {
    getAll,
    getById,
    create,
    update,
    someCustomAction, 
    delete: _delete    
};

function getAll() {
    return myHttpClient.get(baseUrl);
}

function getById(id) {
    return myHttpClient.get(`${baseUrl}/${id}`);
}

function create(params) {
    return myHttpClient.post(baseUrl, params);
}

function update(id, params) {
    return myHttpClient.put(`${baseUrl}/${id}`, params);
}

function someCustomAction(params) {
    return myHttpClient.post(`${baseUrl}/someCustomAction`, params);
}

function _delete(id) {
    return myHttpClient.delete(`${baseUrl}/${id}`);
}

So potentially there are two useQuery hooks there - but I don't think I need getById as I can do that in the component from the getAll. So my current hook looks a bit like this:

export const useQueryToDos = () => {
    const { selectedTopic } = useTopics() // a dependency

    const toDoData = useQuery<toDo[] | null, Error>(["toDos", selectedTopic.id],
        () => toDoService.getAll()
    
    return {
        isLoading: toDoData.isLoading,
        isFetched: toDoData.isFetched,
        organisationBudget: toDoData.data
    }
}

So if I did need a getById I'd create another custom hook - useQueryGetTodo? This seems fine and not too verbose.

However, when it comes to mutations - do I need to write half a dozen separate hooks for the create, delete, update, and any custom operations?

Is there some way of creating a single mutation wrapper with a switch statement, similar to redux or useReducer. Maybe something like:

export type ToDoMutateAction = {"type": "create", toDo: ToDoItem}
| {type: "update", toDo: ToDoItem}
| {type: "delete", toDoId: string }
//and so on

export const useToDoMutation = () => {
    const queryClient = useQueryClient()
    
    return {
        mutate: (mutateAction: ToDoMutateAction) => {
            switch (mutateAction.type) {
                case "create":
                    toDoService.create(mutateAction.toDo)
                        .then(() => queryClient.setQueryData(["toDos", selectedTopic.id], data => [...data, action.toDo])) //Or queryClient.invalidateQueries() if we need to refetch
                //And so on.....
            }
        }
    }
}

The above works and keeps my logic out of my components, but what are the main benefits of react-query mutations as apposed to just doing your api operations then calling queryClient.setQueryData/invalidateQueries?

Is there a way to write a more generic hook with mutations rather than a hook for every operation?

[rocketman101]

So here is where I got to. I came across this thread (https://stackoverflow.com/questions/66427968/how-to-handle-multiple-queries-with-react-query) and see that useQueries is the way to go with multiple queries.

With mutations my current approach is a custom hook that wraps multiple useMutation hooks, e.g.:

useMutateToDos = () => {
const createToDo = useMutation(newTodo => axios.post('/todos', newTodo)) //Perhaps with onsuccess: setQueryData
const updateToDo = useMutation(newTodo => axios.put('/todos', todo))
//Maybe more....

return {
isLoading: createToDo .isLoading || updateToDo.isLoading,
create: createToDo.mutate(newTodo),
update: updateToDo.mutate(toDo)
}
}

My only hesitation was that in my case some mutations are used rarely whereas some frequently - but I'm picking the overhead of having all the hooks initialised is small? Seems better to have all in one place.

[TkDodo]

mutations can have a default mutateFn as well, not sure if also in the queryClient, but at least via setMutationDefaults. So if they are all the same, you can make e.g. one generic one for delete, one for put etc.

advantage over doing it manually for me are the callbacks, as well as react-query keeping track of mutation states (loading), so I can disable the submit button / show a loading spinner easily while the mutation is running.