useQuery making another request rather than re-using cache from prior ensureQueryData call

[manu-remsense]

Hey guys,

I have 2 GET requests to the same endpoint, and I'm trying to remove the 2nd GET request, as it is a duplicate of the first. I'm having an issue where the cached data from ensureQueryData isn't being re-used, so a 2nd call is made by useQuery, despite the exact same query key being used.

I'm making the first call in the route loader like so, (using tanstack router)
routes.tsx

const rootFolderLoader = () => queryClient.ensureQueryData(rootFolderQueryOptions);

const rootRoute = createRootRouteWithContext<{ queryClient: QueryClient }>()({
    component: Root,
    loader: rootFolderLoader,
});

Once the index page is loaded, it makes a 2nd call...

index.tsx

...
const { rootFolder } = useFolderData();
...

This is how the useQuery is structured,

folders.api.ts

export const rootFolderQueryOptions = {
    queryKey: ["folder", "root"],
    queryFn: getRootFolder,
    staleTime: 300000, // 10 minutes
};

export function useFolderData() {
    const { data: rootFolder, isLoading } = useQuery(rootFolderQueryOptions);
    return { rootFolder, isLoading };
}

The GET request is quite expensive, as it takes a couple of seconds... so I'll have a substantial increase in load speed if I get rid of the 2nd call, via making the caching working as it should. Any help would be appreciated !! 🙏

[TkDodo]

is the queryClient you pass into the router context the same one as you pass to the QueryClientProvider ? If no, that's your issue. If yes, please show a full reproduction.

[manu-remsense]

Thanks @TkDodo, you were right. Despite looking into it before, I failed to realize another query client was created in another file. Hence I was able to fix it by ensuring the proper query client is being used.

Thanks a lot, appreciate the assistance 🙏 !!