React Query Timeout: Efficient Management of Asynchronous Data Fetching

React Query enhances the experience of fetching, caching, and updating asynchronous data in React applications. Understanding how to effectively manage timeouts in React Query is crucial for maintaining responsive and resilient user interfaces.

What are timeouts in react query?

Timeouts in React Query are designed to handle scenarios where data fetching might take longer than expected. This mechanism prevents endless waiting and allows developers to gracefully manage delayed responses or network issues. React Query's default timeout settings can be configured globally or overridden in individual queries for more precise control.

How to configure global timeouts

Global timeout settings apply to all queries within your React application. This is useful for establishing a consistent timeout policy across your app. Configure global timeouts using the QueryClient setup:

import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // Disables automatic retries
      retryOnMount: false,
      staleTime: 1000, // Time in milliseconds a query is considered fresh
      cacheTime: 10000, // Cache time for inactive queries
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      refetchOnMount: false,
      refetchInterval: false,
      refetchIntervalInBackground: false,
      suspense: false,
      networkMode: 'always',
      keepPreviousData: false,
      structuralSharing: true,
      notifyOnChangeProps: 'tracked',
      suspense: false,
      useErrorBoundary: false,
      queryFnParamsFilter: args => args,
      queryKeySerializerFn: queryKey => [JSON.stringify(queryKey), queryKey],
      behavior: undefined
    }
  }
});

Setting timeouts for individual queries

For more fine-grained control, you can set timeouts for individual queries. This is particularly useful when certain queries require different handling compared to the global settings:

import { useQuery } from 'react-query';

const fetchData = async () => {
  // Fetching data logic
};

const { data, isLoading, error } = useQuery('data', fetchData, {
  retry: false, // Override global retry settings
  staleTime: 2000, // Specific stale time for this query
  cacheTime: 120000, // Specific cache time for this query
  refetchOnWindowFocus: 'always', // Override global setting
  suspense: true // Enable suspense for this query
});

How to handle query timeouts

React Query does not provide a built-in timeout feature for individual queries. However, you can implement custom logic to handle timeouts. One approach is to use JavaScript's Promise.race method in combination with a timeout promise:

const fetchWithTimeout = (url, timeout = 1000) => {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), timeout))
  ]);
};

const { data, isLoading, error } = useQuery('data', () => fetchWithTimeout('<https://api.example.com/data>'));