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

Popular posts from this blog

Integrating PHP with Message Queues RabbitMQ Kafka

FastAPI and UVLoop: The Perfect Pair for Asynchronous API Development

Working with PHP DOM and XML Handling for Complex Documents