data-fetching

Implement and debug API calls with fetch, React Query, and secure token storage.

1|Updated Jul 25, 2023
One-click install
npx skills add https://github.com/yurkenn/english-tales --skill data-fetching-yurkenn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/yurkenn/english-tales/tree/main/.agent/skills/data-fetching
Command: npx skills add https://github.com/yurkenn/english-tales --skill data-fetching-yurkenn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines and standardizes network operations across the codebase, reducing errors in API calls, caching, and offline handling.

Core Features & Use Cases

  • Basic fetch usage for simple GET/POST requests with robust error checks.
  • React Query (TanStack Query) integration for data fetching, caching, and invalidation.
  • Error handling and retry strategies, including exponential backoff and token management.
  • Authentication/token management using secure storage patterns and refresh flows.
  • Offline support and online/offline synchronization strategies.

Quick Start

Create a reusable network layer using fetch with error handling, caching, and token management.

Frequently Asked Questions about data-fetching

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

FAQPage Schema
How do I implement React Query with fetch and handle API caching?

React Query integration with fetch handles API data fetching, caching, and invalidation. You create a reusable network layer using fetch for basic requests, enabling robust error checks and automatic cache management across your app.

What's the best way to implement API retry strategies with exponential backoff?

API retry strategies with exponential backoff are implemented within your fetch network layer to handle transient failures. This approach systematically delays retried requests, reducing server load and improving data fetching reliability during network instability.

How does token management and authentication work with expo-secure-store?

Token management uses expo-secure-store to safely persist authentication tokens. The data fetching layer implements secure storage patterns and refresh flows, automatically attaching tokens to API calls and handling refresh workflows when authentication expires.

How do I handle offline support and online synchronization for API calls?

Offline support manages API calls when network connectivity is lost, queuing or caching data locally. Online synchronization strategies then resolve pending requests and update the cache automatically once the connection is restored, ensuring data consistency.

Can I use fetch instead of axios for React Query integration?

Yes, you can use fetch instead of axios for React Query integration. The Skill specifies preferring the native fetch API for network operations, ensuring basic GET and POST requests include robust error handling without adding external HTTP client dependencies.

Why do I need environment variables configured for API data fetching?

Environment variables configure different API endpoints and settings for development and production environments. Configuring them ensures your fetch network layer targets the correct backend services, preventing data fetching errors and misdirected authentication flows.