data-fetching

Configure fetch, axios, React Query, and SWR data-fetching workflows.

2|2|Updated Oct 28, 2024

Search Tags:#api #offline #fetch #swr #react-query #data-fetching #axios

Ready to run

npx skills add https://github.com/justincourses/static-page --skill data-fetching-justincourses

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/justincourses/static-page/tree/main/expo-quick-start/.cursor/skills/data-fetching
Command: npx skills add https://github.com/justincourses/static-page --skill data-fetching-justincourses

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-fetching work across apps is error-prone and repetitive, and debugging network issues is time-consuming.

Core Features & Use Cases

Unified network onboarding: guidance for fetch, axios, React Query, and SWR to implement reliable data retrieval.
Robust error handling & offline support: patterns for retries, caching, and offline-first behavior.
Real-world scenario: optimize API calls in a mobile app with token management and environment-based URLs.

Quick Start

Fetch a sample API payload and ensure robust error handling, retry logic, and offline fallback.

Frequently Asked Questions about data-fetching

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

FAQPage Schema

How do I handle API token management and secure storage in React?▼

API token management in React requires secure storage and environment-based configuration. You can enforce robust authentication workflows by utilizing secure storage mechanisms and configuring environment variables to manage tokens across client apps effectively.

What's the best way to implement offline support and caching for data fetching?▼

Offline support and caching for data fetching are best implemented using offline-first strategies. You can apply caching patterns with React Query or SWR to store responses locally, ensuring data availability and fallback behavior during network interruptions.

How do I add retry logic and error handling to axios API requests?▼

Adding retry logic and error handling to axios API requests involves implementing robust error catching mechanisms. You can configure retry patterns to automatically reattempt failed network requests, ensuring reliable data retrieval in unstable network conditions.

Does this data-fetching guidance work with both React Query and SWR?▼

Yes, the data-fetching guidance supports both React Query and SWR. It provides unified onboarding patterns for implementing reliable data retrieval, caching strategies, and error handling across these client-side libraries.

Why does my fetch API call fail without proper environment-based URL configuration?▼

Fetch API calls often fail when environment-based URLs are not properly configured. Setting up environment-based configuration ensures your API requests route to the correct endpoints across development, staging, and production environments without manual URL switching.

Can I use SWR for offline-first strategies in a mobile app?▼

Yes, you can use SWR for offline-first strategies in a mobile app. SWR supports caching and offline fallback patterns, allowing you to maintain data availability and synchronize API requests when network connectivity is restored.