How to do infinite query with route loader?

[lukedukeus]

I have a page where I want to show a list of users with infinite scrolling. I am not doing SSR, instead I have a traditional client that fetches data from a 3rd party API. I do not want the page to render until some of the users have been fetched, in order to reduce CLS. Then, as the user scrolls through the data, it should fetch more on demand. I am using the useInfiniteQuery hook from react-query, but I want to utilize route loaders so that the page doesn't load until the data is fetched. Unfortunatly, I can't use a react hook outside of a react component. Is there a clean way to do this without writing the query call twice, once inside the loader, and once inside the useInfiniteQuery call?

[AhmedBaset]

Use infiniteQueryOptions to share the query logic between useSuspenseInfiniteQuery (in the component) and queryClient.prefetchInfiniteQuery (in the loader):

import { infiniteQueryOptions, useSuspenseInfiniteQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";

const options = infiniteQueryOptions({
  queryKey: ["posts"],
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextPage,
  queryFn: fetchPosts,
});

export const Route = createFileRoute("/dashboard/")({
  loader: ({ context }) => {
    await context.queryClient.prefetchInfiniteQuery(options);
  },
  component: RouteComponent,
});


function RouteComponent() {
  const query = useSuspenseInfiniteQuery(options);
  return <div>Hello "/dashboard"!</div>;
}

[lukedukeus]

Wow Thanks, this is great! If anyone from the future stumbles across this, I also had to change my call to createRootRoute to:

interface RouteContext {
	queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<RouteContext>()({
	component: Root,
});

and then pass my query client into the call to createRouter:

const queryClient = new QueryClient();

export const router = createRouter({
	routeTree,
	context: {
		queryClient,
	},
	defaultPreload: "intent",
	scrollRestoration: true,
	defaultStructuralSharing: true,
	defaultPreloadStaleTime: 0,
});

More documentation here

[lukedukeus]

@AhmedBaset Any clue how to do this but also use a hook inside the query? My query function looks something like this:

const queryClient = useQueryClient();
const usersClient = useServiceClient(UsersClient);

const { data: users = [], isFetching } = useQuery<UserViewModel[], Error>({
		queryKey: ["users"],
		queryFn: grpcStreamingQuery<UserViewModel>(
			(signal) => usersClient.listUsers({}, { abort: signal }),
			// Update cache as each message arrives
			(user) => {
				queryClient.setQueryData(
					["users"],
					(prevUsers: UserViewModel[] = []) => [...prevUsers, user],
				);
			},
		),
		staleTime: 1000 * 60 * 5,
		gcTime: 1000 * 60 * 10,
	});

I have a query that pulls data from a GRPC api, and streams it to the client. I wouldn't want to render the page while the request is in flight, but as soon as the first result is streamed back, then I would want to start rendering the page. I'm not sure if this is possible, or if it is even a good idea, just trying to experiment and find what has the best UX.