Gargabe collected queries do not trigger route pending state with ensureQueryData

Which project does this relate to?

Router

Describe the bug

For my project I use TRPC + Tanstack Query + Tanstack Router as shown in this example.

However I noticed a weird behavior regarding garbage collected data and ensureQueryData: Loading data for a route using the loader with await queryClient.ensureQueryData does not trigger the pending state of that route when the data existed before but was garbage collected in the meantime.

To demonstrate this behavior i took the mentioned example and set a gcTime of 3 seconds along with a Infinity staleTime

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      gcTime: 3000,
    },
  },
})

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { trpc, queryClient }, params: { postId } }) => {
    await queryClient.ensureQueryData(trpc.post.queryOptions(postId))
  },
  pendingComponent: () => <div className="p-2">Post data is pending from Route loader...</div>,
  component: DashboardPostsPostIdComponent,
})

function PostIdComponent() {
  const { data: post, isPending } = useQuery(trpc.post.queryOptions(Route.useParams().postId))

  if (isPending) {
    return <div className="p-2">This pending state inside the component should never show</div>
  }

  return (
    <h1>{post.title}</h1>
  )
}

When this route is loaded for the first time (meaning the data has never existed before in TanstackQuery) the 'pendingComponent' from the Route is showing until the loaded has fetched the post and the 'isPending' state inside 'PostIdComponent' is never shown. If the user then navigates away from this page (meaning the post query will become inactive) the query data is garbage collected / removed after 3 seconds.
Now when navigating back to the post details route, the 'pendingComponent' is not being shown, although the loader function ensuring the query data exists actually fetches the data (you can check the console logs in the linked CodeSandbox). Instead the 'isPending' boolean inside the component becomes true.

Although I am not 100% sure I don't think this is the intended behavior. It threw me off at least. For the mentioned example in the docs this means that the component shows 'Post not found' while the loader is still fetching it.

Your Example Website or App

https://codesandbox.io/p/github/KoTTi97/tanstack-router-trpc-gc-issue-demo/main

Steps to Reproduce the Bug or Issue

1. Check out the linked CodeSandbox demo
2. Click on one of the two posts to load the post details page and see that the pendingComponent for the route is shown
3. Go back to the posts overview
4. Wait more than three seconds
5. Open the same post again and see that the route loading state is not triggered and the pendingComponent is not shown

Expected behavior

I expected ensureQueryData to trigger a route's pending state when the data was garbage collected before.

Platform

• Router: 1.127.3
• OS: macOS
• Browser: Chrome
• Bundler: Vite

Additional context

It's worth noting that replacing 'useQuery' with 'useSuspenseQuery' fixes the problem and correctly triggers the route's pending state but as in the mentioned example 'useQuery' is used (on purpose?) I decided to open this issue.

Start by running the linked CodeSandbox and reproduce the navigation sequence with a 3-second gcTime. Compare the route loader's ensureQueryData behavior with useQuery and useSuspenseQuery in the documented TRPC example; done means a garbage-collected query causes the route pendingComponent to remain visible until loading finishes.