Learn to fetch dashboard metrics, manage loading states, and implement background polling in your React application using React Query for live data.
Previously in this course, we explored synchronizing client and server state and mastered mutations and data updates. Now that we’ve established how to handle mutations, this lesson shifts focus to the "read" side of our dashboard: keeping our UI current with live API data using React Query.
In a production dashboard, data isn't static. Users expect to see the latest metrics without manually refreshing the browser. While we’ve covered caching strategies to optimize network requests, we now need to explicitly configure our queries to behave like a "live" feed.
React Query handles the heavy lifting of the asynchronous lifecycle. When you fetch data, you get back more than just the result; you get flags for isLoading, isFetching, and isError. These are your building blocks for a professional-grade user experience.
Let's update our DashboardStats component. We want to fetch a set of core metrics and ensure the component polls the server for updates every 5 seconds.
JSXimport { useQuery } from CE9178">'@tanstack/react-query'; const fetchDashboardMetrics = async () => { const response = await fetch(CE9178">'/api/stats'); if (!response.ok) throw new Error(CE9178">'Failed to fetch metrics'); return response.json(); }; export const DashboardStats = () => { const { data, isLoading, isError, error } = useQuery({ queryKey: [CE9178">'dashboard-metrics'], queryFn: fetchDashboardMetrics, // Polling every 5 seconds refetchInterval: 5000, // Keep the previous data while fetching in the background placeholderData: (previousData) => previousData, }); if (isLoading) return <div>Loading live metrics...</div>; if (isError) return <div>Error: {error.message}</div>; return ( <div className="stats-grid"> <StatCard title="Active Users" value={data.activeUsers} /> <StatCard title="Revenue" value={CE9178">`$${data.revenue}`} /> </div> ); };
refetchInterval: This is the simplest way to implement "live" data. By setting this to a number (in milliseconds), React Query will automatically trigger a background refetch.isFetching vs isLoading: isLoading is only true for the initial fetch. isFetching is true whenever a request is in flight, including background polling. Use isFetching if you want to show a subtle "updating" spinner without unmounting the whole component.placeholderData: Notice how we use placeholderData to preserve the previous state during background updates. This prevents the dashboard from "flickering" or showing empty states every time the background poll occurs.In your current dashboard project, locate your Overview component.
useQuery hook to fetch your main dashboard data.refetchInterval of 10,000ms.<span>) that renders only when isFetching is true, informing the user that the dashboard is currently updating.refetchInterval too low (e.g., under 1-2 seconds) can overwhelm your server and increase API costs. Always evaluate if your data actually changes that frequently.staleTime: If your staleTime is set to Infinity, your query will never refetch unless you trigger it manually, even if you set a refetchInterval. Ensure your staleTime is lower than your polling interval.refetchInterval stops when the component unmounts. If you need the data to update even when the user is on a different tab, you should move the query to a higher-level provider or use the refetchIntervalInBackground option.We’ve successfully transformed our static dashboard into a reactive one. By leveraging useQuery, we’ve handled the initial fetch, provided graceful loading states, and automated background synchronization. This ensures our users always see the latest data without sacrificing performance.
Up next: We will dive into creating robust error boundaries and reusable loading skeletons to polish the user experience when API calls inevitably fail.
Master state synchronization by learning to trigger refetches, handle mutation responses, and keep your React dashboard in sync with your remote API.
Read moreLearn to use React Query's useMutation hook to handle API data updates, invalidate caches, and implement seamless optimistic UI patterns in your dashboard.
Integrating Live Data into the Dashboard
Handling Multi-step Forms
Optimizing Form Submissions
Performance Profiling with React DevTools
Refactoring for Scalability
Finalizing Dashboard Data Flow
Deploying the Application
Advanced Hook Composition
Implementing Middleware for State
Advanced Context Patterns
Router Loaders and Data Prefetching
Complex Route Guards
Handling Large Datasets in UI
Testing Hooks and Components
Managing Global Modals
Implementing Keyboard Shortcuts
Optimizing Asset Loading
Internationalization Basics
Managing WebSocket Connections