React Query has become a popular library for handling data fetching, caching, and synchronization in React applications. One of the common questions developers have when working with React Query is how to access data that has already been fetched in one component from another component, without making another network request.
In this article, we’ll explore how to share fetched data across multiple components in a React app using React Query, and the best practices for managing data fetching and state in your application.
The Problem: Sharing Fetched Data Between Components
Let’s consider a scenario where you’re fetching a list of “todos” using useQuery in a component called HomeComponent. Now, you want to access the fetched data from another component called TodosComponent. The question is whether you should fetch the data again in TodosComponent or if there’s a way to access the already fetched data from the cache.
Should You Fetch the Data Again?
The simplest approach would be to fetch the data again using the useQuery hook in TodosComponent:
#javascript
// HomeComponent
const { data } = useQuery('todos', fetchFunction);
// TodosComponent
const { data } = useQuery('todos', fetchFunction);
This will make React Query fetch the data again, but it’s not the most efficient solution. This approach doesn’t take advantage of React Query’s caching mechanism, and could result in unnecessary network requests, which is especially problematic if the data doesn’t change frequently.
Solution: Access Data from the Cache
React Query provides a built-in caching mechanism that allows you to share data across components without refetching. When you fetch data with useQuery, React Query caches the data by the query key (in this case, 'todos'). If you use the same query key in another component, React Query will return the cached data instead of triggering a new request.
Using useQuery in Multiple Components
In the scenario where you have HomeComponent and TodosComponent, both components can use useQuery('todos', fetchFunction) to fetch the same data. React Query will automatically fetch the data in the first component (e.g., HomeComponent) and cache it, and subsequent calls to useQuery('todos', fetchFunction) will retrieve the cached data, without needing to make a new network request.
#javascript
// HomeComponent
const { data } = useQuery('todos', fetchFunction);
// TodosComponent
const { data } = useQuery('todos', fetchFunction);
As long as the staleTime hasn’t passed or been invalidated, the data will come from the cache. This ensures that both components access the same data efficiently.
Understanding Caching in React Query
Query Caching and Stale Time
React Query uses a caching mechanism to store the results of queries. When you use the same query key (like 'todos'), React Query will check if that query’s data is available in the cache before fetching it again.
By default, React Query treats data as “stale” after 5 minutes, meaning that after this time, it will automatically attempt to fetch fresh data on the next query call. However, you can configure this behavior using staleTime and other settings.
Setting staleTime
The staleTime setting defines how long React Query considers the fetched data as fresh. While the data is fresh, React Query will return it from the cache without triggering a network request.
For example, you can set staleTime to Infinity to ensure that data is never considered stale, and React Query will only return cached data.
#javascript
const { data } = useQuery('todos', fetchFunction, {
staleTime: Infinity, // Data is considered fresh indefinitely
});
This configuration is useful when you don’t want to refetch the data at all once it’s loaded.
Manual Cache Access
If you want to access the cached data directly in a non-useQuery component, React Query provides the queryClient.getQueryData method, which allows you to manually retrieve cached data.
#javascript
import { useQueryClient } from 'react-query';
const queryClient = useQueryClient();
const cachedData = queryClient.getQueryData('todos');
console.log(cachedData); // Access cached data directly
However, this approach doesn’t trigger a re-render of the component, and you won’t get automatic updates when the cache is updated. Therefore, it is recommended to continue using useQuery to keep your components in sync with the data.
For Best Practice: Extract the Data Fetching into a Custom Hook
Instead of writing useQuery directly in each component, it’s a good practice to extract the data fetching logic into a custom hook. This allows you to centralize your fetching logic and reuse it across components.
Creating a Custom Hook for Fetching Todos
You can create a custom hook like useTodos to handle the fetching and caching logic. This simplifies your components and ensures you are always using the same query key and logic.
#javascript
// useTodos.js
import { useQuery } from 'react-query';
const fetchTodos = async () => {
const response = await fetch('/api/todos');
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
};
export const useTodos = () => {
return useQuery('todos', fetchTodos);
};
Using useTodos in Your Components
Now, you can use the useTodos hook in both HomeComponent and TodosComponent:
#javascript
// HomeComponent.js
import { useTodos } from './useTodos';
const HomeComponent = () => {
const { data, isLoading, error } = useTodos();
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return <div>{data.length} todos loaded</div>;
};
// TodosComponent.js
import { useTodos } from './useTodos';
const TodosComponent = () => {
const { data, isLoading, error } = useTodos();
if (isLoading) return <p>Loading todos...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
};
Both components use the same useTodos hook, and React Query automatically manages the caching, fetching, and syncing of data between components.
Review:
In React Query, it’s best to use useQuery in multiple components with the same query key to avoid redundant network requests and to take advantage of the internal caching mechanism. React Query will ensure that once the data is fetched, it is available for other components that use the same query key.
If you want to avoid writing the same useQuery call in multiple components, create a custom hook to centralize the fetching logic. This approach improves code maintainability and ensures that your components are always using up-to-date data with minimal network requests.
By understanding how React Query handles caching and data fetching, you can optimize your React application for better performance and usability.
