Best practices for refetching data and rerendering after a mutation using Tanstack Router
Hi there,
I have a question regarding the best practices for handling data fetching and rerendering in a specific scenario using Tanstack Router.
In my application, I have a page that fetches data from an API using the loader function during the initial rendering. The fetched data is then displayed on the page. Additionally, there's a button on the page that, when clicked, triggers a mutation on the server-side.
After the mutation is performed, I want to refetch the updated data and rerender the component to reflect the changes. However, I'm unsure about the best approach to handle this flow using Tanstack Router.
Currently, I have two options in mind:
1. Manually refetch the data after the mutation is completed and update the component's state accordingly.
2. Refresh the entire route, which will trigger the loader function again and fetch the updated data.
How can I implement the first method since the data is not stored in state only searchParams are stored in state and its displayed
I have attached my current code file for reference. The component UsersSubscriptionTableBody is responsible for performing the mutation.
Could you please provide guidance on the best approach to handle this scenario? Should I manually refetch the data and update the component, or is there a more idiomatic way to achieve this using Tanstack Router's features?
Any insights or recommendations from a Tanstack Router maintainer would be greatly appreciated.
1 Reply
defeated-apricotOP•16mo ago
Fixed this by using router.invalidate after fetching data