data-fetching

Implement TanStack Query data fetching patterns in React applications.

108|24|Updated Jan 2, 2026

Search Tags:#caching #state management #api #react #data fetching #tanstack query

Ready to run

npx skills add https://github.com/emanueleielo/deepagents-open-lovable --skill data-fetching-emanueleielo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/emanueleielo/deepagents-open-lovable/tree/main/agent/skills/data-fetching
Command: npx skills add https://github.com/emanueleielo/deepagents-open-lovable --skill data-fetching-emanueleielo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of fetching, caching, and managing data in React applications, ensuring a smooth user experience by handling loading and error states gracefully.

Core Features & Use Cases

Declarative Data Fetching: Utilizes TanStack Query for efficient data retrieval and caching.
Loading & Error Handling: Provides components and patterns for displaying loading spinners and error messages.
Optimistic Updates & Mutations: Enables instant UI feedback for data modifications.
Infinite Scrolling & Pagination: Supports fetching large datasets in manageable chunks.
Prefetching: Improves perceived performance by fetching data before it's needed.
Server Components Integration: Demonstrates patterns for data fetching within Next.js Server Components.

Quick Start

Use the data-fetching skill to fetch user data for a given user ID and display their profile.

Frequently Asked Questions about data-fetching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement data fetching and caching in React?▼

Data fetching and caching in React is implemented using TanStack Query, which provides declarative patterns for efficient data retrieval. The Skill covers basic queries, mutations, and infinite scrolling while managing loading and error states gracefully.

What's the best way to handle optimistic updates with TanStack Query?▼

Optimistic updates with TanStack Query are handled by implementing mutations that provide instant UI feedback for data modifications. This approach ensures a smooth user experience by updating the interface immediately before the server confirms the change.

Does this data fetching approach work with Next.js Server Components?▼

Yes, this data fetching approach works with Next.js Server Components by demonstrating specific patterns for efficient data retrieval within the server component architecture. It integrates seamlessly to fetch data during server-side rendering.

How do I add infinite scrolling and pagination to a React application?▼

Infinite scrolling and pagination are added to React applications by fetching large datasets in manageable chunks using TanStack Query. This Skill provides the patterns to load more data dynamically as the user scrolls down the page.

Can I prefetch data to improve perceived performance in React?▼

Yes, you can prefetch data to improve perceived performance in React by fetching data before it is actually needed. This Skill includes prefetching strategies that anticipate user actions to load data proactively into the cache.

How do I manage loading and error states when fetching API data?▼

Loading and error states during API data fetching are managed using dedicated components and patterns for displaying loading spinners and error messages. This ensures the application handles data retrieval failures gracefully without breaking the user interface.