native-data-fetching

Implement and debug network requests and API data fetching for Expo and React Native.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/sc30gsw/jikan-log --skill native-data-fetching-sc30gsw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/sc30gsw/jikan-log/tree/main/.agents/skills/native-data-fetching
Command: npx skills add https://github.com/sc30gsw/jikan-log --skill native-data-fetching-sc30gsw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the guesswork and fragile patterns around implementing and debugging network requests, API calls, and data fetching in Expo and React Native projects by prescribing secure, reliable, and testable approaches.

Core Features & Use Cases

  • Fetch best practices: guidance for using the fetch API safely with status checks, JSON parsing, and AbortController cancellation.
  • State & caching: recommendations and examples for React Query and SWR integration, query invalidation, staleTime, and deduplication.
  • Error handling & retries: typed API errors, retry with exponential backoff, and distinguishing HTTP vs network failures.
  • Authentication: secure token storage with expo-secure-store, authenticated fetch wrappers, and coordinated token refresh logic.
  • Offline & performance: NetInfo integration for online detection, React Query onlineManager sync, and caching/persistence strategies.
  • Expo Router loaders: route-level loader patterns, server vs static execution notes, and useLoaderData typing for web SDK 55+.
  • Environment configuration: guidance on EXPO_PUBLIC_ variables, environment-specific endpoints, and secret handling for server-side code.

Quick Start

Use the native-data-fetching skill to implement a secure fetch wrapper with error handling, token refresh, React Query integration, and offline detection.

Frequently Asked Questions about native-data-fetching

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

FAQPage Schema
How do I implement secure API data fetching and token storage in React Native?

Secure API data fetching in React Native uses authenticated fetch wrappers alongside expo-secure-store for token storage. This approach coordinates token refresh logic and integrates typed API errors to ensure robust network requests.

What is the best way to handle offline detection and caching with React Query in Expo?

Offline detection and caching with React Query integrates NetInfo for online detection and syncs with the onlineManager. This strategy enables resumable caching behavior and query invalidation during network transitions in Expo applications.

How do I add retry logic and error handling to fetch API requests in React Native?

Retry logic and error handling in fetch API requests use exponential backoff and typed API errors. This mechanism distinguishes HTTP failures from network failures and safely parses JSON with AbortController request cancellation.

Does Expo Router support route-level data loaders for web SDK 55+?

Expo Router supports route-level loader patterns with useLoaderData typing for web SDK 55+. These loaders provide server vs static execution notes to implement route-level data fetching within your Expo application architecture.

How do I configure environment variables and API endpoints for an Expo project?

Environment configuration for Expo projects uses EXPO_PUBLIC_ variables to define environment-specific endpoints. This process includes secret handling for server-side code to securely manage API configuration across different deployment environments.

Why does my React Query data not sync correctly when the network goes offline?

React Query data fails to sync offline when NetInfo integration is missing. Integrating NetInfo for online detection and syncing React Query onlineManager ensures proper query invalidation and resumable caching behavior during network transitions.