React router client loader and preloadQuery

Client SDKs
,
1

Hi

I have a react router 7 application (data mode) with Apollo client.

I have a route loader where I use preloadQuery to fetch the pages’s data and I also use preloadQuery.toPromise(queryRef) to prevent route transitions until the query is loaded.

So far so good.

The problem is when I’m already on the page and I want to reuse the loader query to fetch new data based on new url search params (e.g. skip=10&limit=10 etc…)

In order to update the url search params i might use useNavigation or useSearchParams to set new values.

However, because of the toPromise on the preloadQuery it looks like the loader indeed run the query again but the url doesn’t change only when the loader query is fully loaded and has finished.
This looks very odd from UX perspective.

What would be the best strategy to achieve the following behaviour:

  1. Using the loader query before transitioning to the new page until the query has finished invocation. (This step is done)

  2. Reusing the loader to re fetch data by changing the url search params and not having to wait to see the updated url until the query has finished.

I hope it makes sense.
Thanks for the help.

2

That’s pretty much what you opt into if you use toPromise.
Alternatively, can you maybe not call toPromise and instead use a suspense boundary, maybe with a transition when updating the url?

I’m sorry, this borders on being more of a router question, and tbh., while I’ve done the implementation to make things compatible there, I’m not 100% deep in all possible patterns.