Configuring QueryClient with Custom Cache Settings

Show how to set up React Query's QueryClient with custom cache times and stale times for optimal performance.

import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60, // 1 hour cache time
      staleTime: 1000 * 60 * 5, // 5 minutes until data is considered stale
      refetchOnWindowFocus: false // Disable refetch on window focus
    }
  }
});

export default queryClient;

This code snippet creates a new QueryClient instance with custom cache settings. It sets a cache time of 1 hour and a stale time of 5 minutes. Additionally, it disables refetching the data when the window gains focus to reduce unnecessary network requests.