[Begginer] How to redirect without refetching? (tanstack router and tanstack query)

[Crossoufire]

Hello,

I'm looking for a way to do a redirect without refetching data. I'll try to explain my situation in detail with an example:

• A user visits the trending movies page on my website. I'm using the loader from TanStack Router, which fetches data from my API. My API, in turn, calls TMDB's API which returns the trending movies to be displayed.
• Each movie is linked via a Link component to the route: /details/$mediaType/$mediaId?external=True
• I'm using the Link component instead of onClick to preserve the ability to open links in new tabs (e.g., using Ctrl+Click).
• When a user clicks a movie's link, it triggers the loader from the details page.
• The loader fetches the data from my API, which checks whether the movie exists in my DB by using either the api_id or id attribute, depending on the external argument.
• If the movie is not found in the DB, it gets added before returning the data.
• Since the movies are being fetched from the trending movies page, the external argument is set to True.
• The data is then returned to the loader, and the DetailsPage component renders.

The issue I'm facing is that I always want my internal mediaId to be displayed (and saved in Tanstack query), but without refetching the data already fetched using the external mediaId. I’ve found a solution that works, but it feels more like a workaround. If anyone has a better approach, I'd appreciate the advice.

Here’s my current solution:

export const Route = createFileRoute("/_private/details/$mediaType/$mediaId")({
    component: MediaDetailsPage,
    loaderDeps: ({ search }) => ({ search }),
    loader: async ({ context: { queryClient }, params: { mediaType, mediaId }, deps: { search } }) => {
        const cacheData = queryClient.getQueryData(["details", mediaType, mediaId.toString()]);
        if (cacheData) return cacheData;
        const data = await queryClient.ensureQueryData(queryOptionsMap.details(mediaType, mediaId, search.external));
        queryClient.setQueryData(["details", mediaType, data.media.id.toString()], data);
        if (search.external) {
	    throw redirect({ to: `/details/${mediaType}/${data.media.id}`, replace: true });
        }
        return data;
    },
});

Here, I first check if cached data exists for the internal mediaId. It does not (always in the example where the user comes from the trending page with external Ids), so I query the data, then set the query data using the internal mediaId from my DB (I create the cache). Then, because the external argument is True, I redirect to the same route but with the internal mediaId, and because the cache now exists it returns the cached data (I've also set a staleTime of 2 seconds to prevent refetching when the page loads from the cache).