How React Query Works

This project utilizes React Query (TanStack Query) for efficient server state management. Here is a breakdown of the key concepts implemented:

1. Client Provider: The application is wrapped in a QueryClientProvider, which makes the QueryClient available to all components.
2. Fetching Data: We use the useQuery hook to fetch data from our API endpoints. This hook handles caching, background updates, and stale data management automatically.
3. Mutations: For creating, updating, or deleting data, we use the useMutation hook. This allows us to perform side effects and then invalidate queries to refresh the UI with the latest data.
4. DevTools: The ReactQueryDevtools component is included to visualize the state of queries during development.

Key Features Implemented

• Automatic Caching: Data is cached by unique query keys.
• Background Refetching: Data is kept fresh by refetching when the window is refocused or the network reconnects.
• Loading & Error States: Built-in isLoading and isError flags simplify UI rendering logic.