ensureData usage with useInfiniteQuery (react-query)

[0xturner]

I am using ensureData for route preloading. This works great for preloading data that is later loaded inside the component using useQuery, but does not seem to work as well with useInfiniteQuery.

The issue seems to be that the queryKey does not match between ensureData and useInfiniteQuery, therefore there is a cache miss and a duplicate fetch that occurs.

This would not be an issue using with vanilla react-query, since the key can be set to the same value, but TRPC manages the key for us.

Is there a workaround? Or could TRPC perhaps benefit from a complementary ensureInfiniteData helper, which uses type: 'infinite' for the key?

const route = createRoute({
  getParentRoute: () => parentRoute,
  path: "/",
  component: Component,
  loader: () => {
    trpcUtils.todos.ensureData({
      limit: 10,
    });
  },
});

function Component() {
  trpc.todos.useSuspenseInfiniteQuery(
    {
      limit: 10,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      staleTime: Infinity,
    },
  );

  return <>Todos</>;
}