query+react-router: useMutation vs. router action?

[joeltamkin]

useMutation and react router "actions" seem to be at odds.

I like the useMutation pattern, but as a hook it's not practical to use along with the "Action" pattern in React router. I've found that React Router actions (useSubmit()) must be called in order for sibling or parent components to re-render new data, even when dependent on the same exact query. For instance, I have an app structured generally like this:

<App>
  <AppHeader> [component that utilizes useQuery to display a title at the top of the app based on the current record]
  <Settings> [utilizes useQuery w/ the same exact key, and includes methods to update the selected record, including the title]
</App>

I can verify w/ the query dev-tools that there is a single query with two observers.

If I just useMutation within the component, AppHeader will not re-render. No combination of setQuery/invalidateQuery/etc. will force AppHeader to re-render. Surprisingly, it doesn't even re-render on window regaining focus, etc. I have to either hard refresh or interact with <AppHeader> (it has menus, for instance), to see the updated title. I assume this lack of re-rendering is all part of how React Router manages the content, but makes me question any understanding of React hooks that I had...

At any rate - if I assign an action (even just a dummy function) to <Settings> and call useSubmit() from within the component (such as within onMutate() or onSettled() , it will trigger <AppHeader> to re-render. (it actually re-renders twice...annoyingly)

Is this a silly hack? Should I abandon useMutation in favor of the React-Router Action pattern for updating data?

[TkDodo]

In the example as well as my blog post, I'm not using mutations - just the router actions. There likely isn't much need to use mutations unless you have more complex scenarios that the router actions cannot handle.

[joeltamkin]

Thanks for confirming - I did study that example pretty thoroughly and read the blog The docs make a strong case for useMutation so I was hesitant to abandon it. My approach was mostly due to starting my design around React Query and later refactoring to integrate React Router. Had I started the other way around (and not been somewhat unimpressed with the React Router docs), I probably wouldn't be questioning it!

[ofcljaved]

The example link page doesn't exist anymore can you help