Introduction

Imagine you're building a blog application using TanStack Query.

When a user is reading a blog post, you want to provide a snappy experience for them to navigate to the next post.

Without prefetching the next post, the user would have to wait for the next post's data to load after clicking on the "Next Post" link, leading to a delay and not the best user experience.

Prefetching to the rescue

This is where prefetching comes in. Prefetching is the act of fetching data before it's needed. In our case, we want to prefetch the next post's data when the user is reading the current post.

This way, when the user clicks on the "Next Post" link, the data is already available, and the transition is snappy.

TanStack Query code

Here is an example of how you can prefetch the next post's data using TanStack Query:

import { useQuery, useQueryClient } from "react-query";

const fetchPost = async (postId) => {
  try {
    const response = await fetch(`/api/posts/${postId}`);
    if (!response.ok) {
      throw new Error("Failed to fetch post");
    }

    return response.json();
  } catch (error) {
    throw new Error("Failed to fetch post");
  }
};

const BlogPost = ({ postId }) => {
  const queryClient = useQueryClient();

  const { data: post, isLoading } = useQuery(["post", postId], () =>
    fetchPost(postId)
  );

  useEffect(() => {
    const prefetchNextPost = async () => {
      await queryClient.prefetchQuery(["post", postId + 1], () =>
        fetchPost(postId + 1)
      );
    };

    prefetchNextPost();
  }, [postId, queryClient]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Link to={`/posts/${postId + 1}`}>Next Post</Link>
    </div>
  );
};

If you're familiar with TanStack Query, most of this code should look familiar to you. The new thing here is queryClient.prefetchQuery. TanStack Query prefetches the data for the next post when the current post is being read upon mounting.

Because TanStack Query is more than just a fetching library, it's an async state management library, we can store the prefetched data in the cache and use it when the user navigates to the next post.

When navigating to the next post, the postId is found in the cache, so useQuery will return the data from the cache instead of making a network request.