data-fetching

The `data-fetching` skill provides a structured approach to handling data retrieval, updates, and pagination in React applications using TanStack Query. It addresses common challenges in modern web development, such as managing loading states, error handling, and keeping UI data synchronized with server data. By leveraging this skill, developers can streamline asynchronous data operations and maintain responsive, interactive interfaces without manually managing complex state logic or repetitive fetch patterns.

This skill includes several key capabilities: basic queries to fetch individual data records, mutations with optimistic updates for smoother user experiences, infinite scrolling and pagination for handling large datasets, and dependent queries that execute based on the availability of prior data. Each pattern demonstrates practical integration with React components, including error handling, loading skeletons, and automatic cache invalidation. The examples provided cover both simple data fetching scenarios and more advanced operations like rollback on mutation errors, ensuring robust and predictable application behavior.

Typical use cases for this skill include building user dashboards, content management systems, and interactive applications that rely on up-to-date server data. It is particularly useful for front-end developers working with React who need to implement efficient data handling with minimal boilerplate. By following these patterns, teams can reduce bugs, improve user experience, and maintain a clear separation between data logic and UI components, making the development process faster and more maintainable.