How to Use React-Query Disable Cache For Live Results

Managing data effectively in a modern React app requires full control over fetch, cache, and render cycles. With React Query (also referred to as TanStack Query), developers get powerful tools for fine-tuning data fetching and state management. But sometimes, the default caching behavior isn’t what your app needs—especially when fresh data is critical.

This blog explores how to disable cache in React Query, offering deeper control over your query lifecycle for situations when stale or outdated data isn't acceptable.

This guide reflects production-ready practices, drawn from experience building React components at scale using TanStack Query.

Quick Overview of React Query's Cache System

React Query caches query result from each query function call. If you fetch the same query key again, React Query will serve cached data instantly.

Default Behavior:

• Queries are enabled by default.

• Cached queries are marked stale immediately unless staleTime is set.

• React Query automatically tries a background fetch when a component mounts again.

Here's a mermaid diagram showing the default query lifecycle:

Why You Might Want to Disable Cache

Sometimes, you need specific data from a live API call—every time.

Common Scenarios:

Use Case	Why Cache Doesn’t Work Well
Real-time dashboards	Stale data leads to inaccurate UI
User-specific content on every load	Personalized data shouldn't be reused
Form submissions with immediate re-load	Re-fetching ensures consistency
Sensitive financial or stock data	Always show the most recent information

In such cases, disabling cache or forcing fresh data load becomes necessary.

How to Disable Cache in React Query

There is no disableCache flag, but you can configure behavior to bypass the default caching using these options:

• Set staleTime: 0

• Set cacheTime: 0

• Use enabled: false and trigger manually

• Change query key to force a re-fetch

Example 1: Disable cache with staleTime and cacheTime

1const { data, refetch } = useQuery({
2  queryKey: ['users'],
3  queryFn: fetchUsers,
4  staleTime: 0,
5  cacheTime: 0,
6});

​

This setup immediately ensures the query is stale and removed from cache shortly after.

Example 2: Manually control query execution

Sometimes, you don’t want the query to run until an event occurs. Use enabled: false.

1const { data, refetch } = useQuery({
2  queryKey: ['userById', userId],
3  queryFn: () => fetchUserById(userId),
4  enabled: false,
5});
6
7const handleClick = () => {
8  refetch();
9};

​

Here, the query function is disabled by default, and only runs on user interaction.

Prevent Stale Query Result Using staleTime

The staleTime parameter defines how long a query stays fresh. When set to Infinity, the data will never be marked stale.

To disable background fetch, you can set staleTime appropriately.

1useQuery({
2  queryKey: ['products'],
3  queryFn: fetchProducts,
4  staleTime: 1000 * 60 * 5, // 5 minutes
5});

​

This reduces unnecessary request cycles and improves component load speed.

One-Time Fetch (Force Bypass Cache)

To fetch fresh data once, without affecting other components or instances, you can manually disable cache like this:

1const { data } = await queryClient.fetchQuery({
2  queryKey: ['orders'],
3  queryFn: fetchOrders,
4  staleTime: 0,
5  cacheTime: 0,
6});

​

This fetches specific data without persisting it beyond the query result lifetime.

Understanding Parameters That Influence Query Behavior

The configuration object passed to useQuery can include several useful parameters.

Common Parameters That Affect Cache

Parameter	Description	Type	Default
staleTime	Time before data is marked stale	number	0
cacheTime	Time before inactive query is garbage-collected	number	5min
enabled	Whether the query runs on mount	boolean	true
retry	How many times to retry if there's an error	number/boolean	3

Using QueryClient for Fine-Grained Control

You can call queryClient.invalidateQueries() to force refetch. This doesn't necessarily disable cache but ensures that a new fetch is made.

1import { useQueryClient } from '@tanstack/react-query';
2
3const queryClient = useQueryClient();
4
5queryClient.invalidateQueries({
6  queryKey: ['posts'],
7});

​

You can also remove queries from cache completely:

1queryClient.removeQueries({ queryKey: ['posts'] });

​

Handling Error States

When disabling cache, handling error scenarios becomes even more critical since React Query won’t reuse a successful query result.

1const { status, error, data } = useQuery({
2  queryKey: ['profile'],
3  queryFn: fetchProfile,
4  retry: 1,
5  onError: (err) => {
6    console.error('Error fetching profile:', err.message); // Log error message
7  },
8});

​

Note:

• Always check the status

• Never assume data exists without null checks

• Be ready for error boundaries

Examples of Disabling Cache for Real APIs

Example 3: Refetch on every page view

1const { data, isLoading } = useQuery({
2  queryKey: ['analytics'],
3  queryFn: fetchAnalytics,
4  staleTime: 0,
5  cacheTime: 0,
6});

​

Each time the page is loaded, this will fetch fresh data.

Comparing Cache Strategies in TanStack Query

Strategy	Caching	Re-fetch Trigger	Best For
Default	Yes	Stale or mount	Most general apps
Cache Disabled	No	Every request	Real-time, live data
Conditional Enabled	Yes	On event	Auth-gated queries
Manual Fetch	Optional	Explicit call	Form-dependent fetches

What Happens Behind the Scenes?

React Query maintains an internally normalized cache structure based on the query key. Each query is mapped to a query function, status, and data object.

Internal Query Object (Simplified)

1interface Query {
2  queryKey: string[];
3  queryFn: Function;
4  state: {
5    status: 'success' | 'error' | 'loading';
6    data: any;
7    error: Error | null;
8  };
9}

​

Final Thoughts

To disable caching in React Query, adjust staleTime and cacheTime and use enabled: false as needed. These small changes give you complete control over request, load, and render behaviors, ensuring that the data displayed is always what you expect.

When you require fresh query data, especially in sensitive or user-focused apps, disabling the cache is not just helpful—it’s required. Always align your query function strategy with your app's specific data requirements.

✅ Key Takeaways

• Set staleTime and cacheTime to 0 to disable cache.

• Use enabled: false to avoid automatic fetches on component mount.

• Use queryClient.invalidateQueries or removeQueries for manual cache control.

• Never forget to handle error message states when querying live data.

• Design your React components to expect empty or loading states when cache is off.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.