How to pass form data to queryClient.setMutationDefault when submitting a form

[aubreyzulu]

How do i pass form data to queryClient.setMutationDefault when submitting a form..?

[TkDodo]

data is always passed to the mutation function (mutate or mutateAsync) returned by useMutation, not to useMutation itself. So, i don’t think i understand the question 🙃

[aubreyzulu]

Here is sample code `
queryClient.setMutationDefaults('user/register', {
mutationFn: async (data) => {
console.log(data);
try {
const response = await axios.post('/user/register', data);
return response.data;
} catch (error) {
if (error.response) {
throw new HttpError(
error.message,
error.response.status,
error.response.data
);
}
throw new HttpError('something went wrong');
}
}
});

form code
const { mutate, isLoading } = useMutation(
(data) => axios.post('/user/register', data),
);

const onSubmit = (data) =>{mutate(data);};

`

[TkDodo]

If you set a mutationFn as default, why do you also pass a function to useMutation? That overrides the default.

[aubreyzulu]

I removed it, it's still not working. only working when I give a function to useMutation, but I want to have the function passed to query liebt. setMutationDefault

…

On Thu, 7 Jan 2021, 21:35 Dominik Dorfmeister, ***@***.***> wrote: If you set a mutationFn as default, why do you also pass a function to useMutation? That overrides the default. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1598 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE2LO7QGSNHOUI4DEQAGN63SYYEIBANCNFSM4VZMBEGA> .

[TkDodo]

I can take a closer look if you can reproduce it in a codesandbox.

[aubreyzulu]

Alright let me do that

…

On Thu, 7 Jan 2021, 21:47 Dominik Dorfmeister, ***@***.***> wrote: I can take a closer look if you can reproduce it in a codesandbox. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1598 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE2LO7W5KJTMUV5W5R46FOLSYYFTTANCNFSM4VZMBEGA> .

[jaocfilho]

I have the same problem, I need to pass params to mutationFn. Did you manage to get it done?

[TkDodo]

I can take a closer look if you can reproduce it in a codesandbox.

⬆️

[ajendrex]

Same here,

documentation here looks great, but I was not able to follow that pattern. The call to mutate() with parameters is invalid, the error says: "TS3245: Argument of type '<whatever type my mutationFn receives>' is not assignable to parameter of type 'void'"

[TkDodo]

if you use a defaultMutationFunction, there is no way that useMutation can actually infer the types of the mutationFunction. You'd likely have to help it out by providing the generics:

const client = new QueryClient();
client.setMutationDefaults(["addTodo"], {
  mutationFn: (newTodo: string) => axios.post("/api/data", { text: newTodo })
});

const addTodoMutation = useMutation<Todo, Error, string>({
  mutationKey: ["addTodo"],
  onSettled: () => {
    queryClient.invalidateQueries(["todos"]);
  }
});

• First generic is TData - the result type of the mutationFn.
• Second generic is TError - the error type (can be unknown)
• Third generic is TVariables - the type of the variables to pass in

so yeah you lose type inference but that is expected because setting something globally is something typescript cannot really know about.

[ajendrex]

thanks @TkDodo, that makes sense, I'll try it soon 👍