Better DX on actions / mutations

[aarjithn]

Tanstack router has great data loading options. But I couldn't find much detail about how to handle the submission part, apart from router.invalidate() and The docs mention its left upto user to implement.
https://tanstack.com/router/latest/docs/framework/react/guide/data-mutations

But remix/react-router has a nice clientAction method where say you can call some API and redirect user on completion.
For a framework that aims to make it easier to work with SPAs, this is something that would be great.

In the Kitchen sink example there is this custom useMutation hook - how about providing something like this out of the box?
https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx

[aarjithn]

I was watching a talk on Tanstack router and it said there is a thought of providing actions similar to https://docs.solidjs.com/solid-router/concepts/actions which seems really nice

I wonder what happened to that plan?

[schiller-manuel]

why not just use react-query's useMutation?

[aarjithn]

Yes, that could be an option - but maybe not all apps need tanstack query?

Tanstack router comes with a mini implementation of loaders, (or one can integrate query) but for action the only option is to integrate tanstack query, or use the custom hook like in demos.

A solid like lightweight concept would be nice, where you just call some async API and do router.invalidate() or redirect

[aarjithn]

This is a nice example -

https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.index.tsx

Of course those who who this can copy paste this useMutation implementation, but many may not know it exist, and try to create custom solutions