#atom

Data fetching and state management library for React applications

Core Idea: TanStack Query (formerly React Query) is a declarative, hook-based library that simplifies server state management in React applications by providing built-in data fetching, caching, synchronization, and update capabilities.

Key Elements

Key Principles

• Server State Management: Treats server data as a separate concern from client state, recognizing its asynchronous, potentially stale, and shared nature.
• Declarative Data Fetching: Uses hooks to declaratively manage data fetching, eliminating manual fetch states and side effects.
• Intelligent Caching: Implements automatic caching with configurable stale times, refetching strategies, and cache invalidation.

Technical Specifications

• Current Version: v5 (as of April 2025)
• Framework Support: Works with React, Vue, Solid, Svelte (through TanStack ecosystem)
• Bundle Size: Lightweight core with modular imports
• TypeScript Support: Full type safety with generics support

Use Cases

• Web applications with complex data requirements
• Real-time dashboards needing frequent updates
• E-commerce platforms with product catalog management
• Applications requiring offline support with data synchronization

Implementation Steps

1. Installation:

   npm install @tanstack/react-query
   # or
   yarn add @tanstack/react-query
   

2. **Setup Provider**:
    
    ```jsx
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
    
    const queryClient = new QueryClient();
    
    function App() {
      return (
        <QueryClientProvider client={queryClient}>
          <YourApplication />
        </QueryClientProvider>
      );
    }
    ```
    
3. **Use Hooks**:
    
    ```jsx
    import { useQuery, useMutation } from '@tanstack/react-query';
    
    function Products() {
      const { isPending, error, data } = useQuery({
        queryKey: ['products'],
        queryFn: () => fetch('/api/products').then(res => res.json())
      });
      
      // Use the data...
    }
    ```
    

### Common Pitfalls

- Not using proper query keys, leading to incorrect cache management
- Overriding default settings unnecessarily
- Not handling loading and error states properly
- Incorrect invalidation patterns leading to stale data

## Additional Connections

- **Broader Context**: Server State Management - How TanStack Query fits into the data management ecosystem
- **Applications**: React Application Architecture - How to structure applications using TanStack Query
- **See Also**: SWR - Alternative data fetching library with similar concepts

## References

1. TanStack Query Official Documentation - https://tanstack.com/query/latest
2. "Practical React Query" by TkDodo - https://tkdodo.eu/blog/practical-react-query

#react #data-fetching #server-state #tanstack #hooks #caching

---
**Sources:**
- From: useQuery