How to selectively refetch data in a loader based on query params or path changes?

[ArthurGuez]

Hi,

I'm using React Router v6.28.0 and have a route with a loader that makes two fetch calls:

{
  element: <ListPage />,
  loader: async ({ params, request }) => {
    const listValues = await listValuesLoader({ params, request });
    const listElements = await listElementsLoader({ params });

    return { listElements, listValues };
  },
  path: ':entity',
}

I need listValuesLoader to rerun whenever the query parameters (request) change.
I need listElementsLoader to only refetch when the dynamic path (:entity) changes.

How can I achieve this behavior? Can I split the calls in two different loaders?
Can shouldRevalidate be helpful here?

Thanks,

[sergiodxa]

There's no way to only fetch part of a loader, there are a few solutions.

1. Cache the data in the loader, this way your whole loader will run again but the cached data will not be fetched/queried again.
2. Split the route in multiple routes so each one can have a separate loader

I think 1 is better, you can use something like TanStack Query's QueryClient for that.

[ArthurGuez]

Yeah, thanks, I went with option 1 :)