How to Fetch and Cache Data Using TanStack Query
Fetching and caching data is one of the most powerful features of TanStack Query. It simplifies handling server state by providing built-in caching, background updates, and error handling.
This tutorial will guide you through fetching and caching data using TanStack Query with practical examples in React.
Step 1: Install TanStack Query
Install the TanStack Query library along with its development tools.
npm install @tanstack/react-query
npm install @tanstack/react-query-devtools
Step 2: Set Up the Query Client
Before fetching data, set up the QueryClient to manage all queries in your application.
Example: Setting Up Query Client
App.js
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<h1>TanStack Query Example</h1>
<UsersList />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
}
export default App;
Step 3: Fetch Data Using useQuery
The useQuery hook is the backbone of TanStack Query's data-fetching mechanism. It takes a query key and a fetching function to retrieve and cache data.
Example: Fetching User Data
UsersList.js
import React from 'react';
import { useQuery } from '@tanstack/react-query';
const fetchUsers = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
};
export function UsersList() {
const { data, isLoading, isError, error } = useQuery(['users'], fetchUsers);
if (isLoading) return <p>Loading...</p>;
if (isError) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
Step 4: Handle Loading and Error States
TanStack Query provides isLoading and isError states to easily manage UI feedback.
Example: Improved Error and Loading Feedback
export function UsersList() {
const { data, isLoading, isError, error } = useQuery(['users'], fetchUsers);
if (isLoading) return <p>Loading users...</p>;
if (isError) return <p>Error fetching users: {error.message}</p>;
return (
<div>
<h2>Users:</h2>
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
Step 5: Caching Data Automatically
TanStack Query caches data using the query key. If the same key is used in another useQuery, the data is served from the cache, avoiding unnecessary API calls.
Demonstrating Caching
If you use useQuery(['users'], fetchUsers) in multiple components, the data will only be fetched once and reused.
Step 6: Enable Automatic Refetching
You can enable automatic refetching to keep your data up-to-date, either when the window regains focus or at regular intervals.
Example: Automatic Refetching
export function UsersList() {
const { data, isLoading, isError, error } = useQuery(['users'], fetchUsers, {
refetchOnWindowFocus: true, // Refetch when the window regains focus
refetchInterval: 5000, // Refetch every 5 seconds
});
if (isLoading) return <p>Loading...</p>;
if (isError) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
Step 7: Prefetch Data for Better User Experience
Prefetching allows you to load data into the cache before the user needs it, reducing loading times.
Example: Prefetching Data
import { useQueryClient } from '@tanstack/react-query';
export function PrefetchButton() {
const queryClient = useQueryClient();
const prefetchUsers = async () => {
await queryClient.prefetchQuery(['users'], fetchUsers);
};
return <button onClick={prefetchUsers}>Prefetch Users</button>;
}
Step 8: Stale Time and Cache Time
You can control how long cached data is considered fresh using the staleTime and cacheTime options.
Example: Configuring Stale Time
const { data } = useQuery(['users'], fetchUsers, {
staleTime: 10000, // Data is considered fresh for 10 seconds
cacheTime: 300000, // Cache is retained for 5 minutes
});
Full Example
Combine all steps to create a fully functional app with TanStack Query.
App.js
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { UsersList } from './UsersList';
import { PrefetchButton } from './PrefetchButton';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<h1>TanStack Query Example</h1>
<PrefetchButton />
<UsersList />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
}
export default App;
In this tutorial, you’ve learned:
- How to fetch data with useQuery.
- How caching works in TanStack Query.
- How to handle loading and error states.
- How to enable automatic refetching and prefetch data.
TanStack Query is an excellent tool for managing server state in modern applications. With these basics, you can start building more advanced features like dependent queries and mutations. Hope this is helpful, and I apologize if there are any inaccuracies in the information provided.
Comments
Post a Comment