Theo's Typesafe Cult•12mo ago

Enhancing Performance with Pre-fetching Paginated Queries in tRPC

Hello, I'm currently focused on boosting the performance of a website that incorporates tRPC. Our setup involves a paginated query that fetches a list of items based on the active page, which is determined by the query parameters:

 const { page } = router.query;
 const { data, isLoading } = trpc.getMany.useQuery(
        {
            where: {
                createdAt: {
                    gte: twoWeeksAgo,
                },
            },
            page: Number(page) || 1,
        },
        {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
        }
    );

 const { page } = router.query;
 const { data, isLoading } = trpc.getMany.useQuery(
        {
            where: {
                createdAt: {
                    gte: twoWeeksAgo,
                },
            },
            page: Number(page) || 1,
        },
        {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
        }
    );

Take, for example, the scenario where we are on page = 1. This query will retrieve a list of items specifically for that page. What I aim to achieve is to have the data for page = 2 pre-fetched and stored in the react-query cache in the background. This way, when users navigate to page 2, the transition is seamless with the data appearing instantly, leveraging react-query's caching capabilities. Is there an established pattern or best practice to prefetch the data for the next page without rendering it, thus ensuring that the data is readily available and the user experience is smooth? Any guidance or suggestions would be greatly appreciated. Thank you!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Enhancing Performance with Pre-fetching Paginated Queries in tRPC