refetch loader

[VladyPoim]

Hi,

I'm trying to refresh loader data after navigation with new search params by using hook useNavigation. Unfortunately, it was not possible to update the loader data in this way. Perhaps there are other ways to refetch data?

[jintaokoong]

I'm wondering the same exact thing. It'd be great if by changing the search param, loader function will be triggered automatically. One way of solving this is for the time being, would be pulling a data fetching library like react query, passing the search params from useSearch into useQuery to trigger a refetch.

[samadadi]

This is a quote from react router website:

By default, route loaders are called for new or changed routes in the route hierarchy that resulted from a navigation.

Specifically route's path. So i think it is better react router add a flag to useNavigation's navigate function to force router reload required loader. I am facing this problem in my react app and I had to add additional lines of code to work around this.

[mvacha]

I'm evaluating TanStack Router as a potential replacement for the React Router we currently use, and I have run into this issue too. React Router calls loader when search parameters change, but TanStack does not 😔.

This is my workaround, but I think it should be an option on the route or the useNavigate hook.

//HACK: force loader to run when search params change
const search = useSearch();
const router = useRouter();
useEffect(() => {router.invalidate()}, [search, router]);

[tannerlinsley]

Can you show me an example, or your code please?

[tannerlinsley]

As of the latest version, it’s impossible to use search params in a loader without passing them through the loader context. Anything you pass through the loader context is watched for changes. When they change, your loader will rerun.

[tannerlinsley]

It’s very similar to Reacts dependency array tracking

[mvacha]

Thanks for a prompt response, I'm on 0.0.1-beta.192, so I'll look into loader context and migrate to 194.

[mvacha]

Got it working :)

BTW: Is it a feature or a bug that the search property passed to the loaderContext is not validated?

[tannerlinsley]

Hmmm… sounds like a bug

[bruceharrison1984]

Is there any feasible way of doing this, short of navigating back to the same route with some kind of random search param to essentially force rerunning of the loader?

My use case is essentially adding an item to a list, and I'd prefer not to have a full postback or duplicating the loader call on the page itself.

edit
It looks like navigating back to the same route has the effect I was looking for.

const navigate = Route.useNavigate();
...
const submitForm = () => {
  navigate({ to: '.' });
}

[BrendanC23]

You could also do router.invalidate().