Prefetching data with TanStack Query

PublishedMay 10, 2024

•2 min read•View as Markdown

Tiger Abrodi

Just a guy who loves to write code and watch anime.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Become a cracked product engineer today

Qualities that make outstanding builders.

Jun 1, 20264 min read

Bipedal, humanoid, and the words for creature shapes in games

Bipedal vs quadrupedal: how many legs This is about the number of legs the creature walks on. Bipedal. Two legs. Humans, ostriches, T-rex, kangaroos, most fantasy humanoids. Quadrupedal. Four legs. Do

May 18, 20263 min read

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

Intro You hear "lerp" and "smoothstep" everywhere in game dev. They sound like math jargon. They're not. Both are small tools that do the same job: smoothly move from one value to another. The problem

May 18, 20264 min read

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

What is Kinematics Kinematics is the math field. It's the study of how things move without worrying about forces (which would be dynamics). FK and IK are the two branches: forward kinematics and inver

May 10, 20267 min read

How to make your textures fast on the GPU

Intro Textures are usually the biggest cost in a 3D scene. Memory, bandwidth, and load time all get eaten by them. Resizing them is the obvious lever. There's more. This post is about the less obvious

May 10, 20268 min read

How to make your textures fast on the GPU

Tiger's Place

497 posts

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.

Command Palette

Comments

More from this blog

Introduction

Prefetching to the rescue

TanStack Query code