[Tanstack:React-Query:v5] Imperatively create a mutation?

In v4, I could do:

const result = await queryClient.executeMutation({
mutationFn: () => fetch('/api/data', {
method: 'POST',
body: JSON.stringify(newData),
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json()),
// Optional callbacks
onSuccess: (data) => { console.log('Success:', data); },
onError: (error) => { console.error('Error:', error); }
});

That was removed in v5, what is the closest way to do the same in v5?

ChatGPT suggests this monstrosity, but it seems wrong, is this really the way to do it in v5?

function createImperativeMutation(mutationFn) { const observer = new MutationObserver(queryClient, { mutationFn }); return { mutate: (variables) => observer.mutate(variables), mutateAsync: (variables) => observer.mutate(variables) }; } // Usage co...

In v4, I could do:

const result = await queryClient.executeMutation({
mutationFn: () => fetch('/api/data', {
method: 'POST',
body: JSON.stringify(newData),
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json()),
// Optional callbacks
onSuccess: (data) => { console.log('Success:', data); },
onError: (error) => { console.error('Error:', error); }
});

That was removed in v5, what is the closest way to do the same in v5?

ChatGPT suggests this monstrosity, but it seems wrong, is this really the way to do it in v5?

function createImperativeMutation(mutationFn) { const observer = new MutationObserver(queryClient, { mutationFn }); return { mutate: (variables) => observer.mutate(variables), mutateAsync: (variables) => observer.mutate(variables) }; } // Usage const mutation = createImperativeMutation((data) => fetch('/api/data', { method: 'POST', body: JSON.stringify(data) }) );

Similar Posts