useMutation with action in React Router v6

[tame canopy]

Is there any way to useMutation with action in React Router v6?

[plain merlin]

You wouldn't be able to use a useMutation react hook in a loader, since that would escape the boundaries of React.

In the loader, you could perform your actions (api calls, or others.) and set the data as a result of a mutation or query in react-query using the defined queryClient. They have done something similar here, with a query (https://codesandbox.io/s/github/tanstack/query/tree/main/examples/react/react-router?from-embed=&file=/src/routes/root.jsx).

Could I ask why you'd want to access a mutation in a loader? Since mutations are generally user-driven based on an event (hover, click, submit, etc.), not when loading a page.

[tame canopy]

Thanks for your answer.
Yes, I have a page with a form that mixes UI and mutation code. I just wanna separate them and leverage the useMutation of react-query. I found out that react-router action is a very interesting feature that helps me archive that. But it seems I can't use a hook in the react-router action

[summer patio]

Have you seen this?

https://tkdodo.eu/blog/react-query-meets-react-router