native-data-fetching

Implement fetch-based API requests with authentication, error handling, and caching in React Native/Expo.

Updated May 7, 2026
One-click install
npx skills add https://github.com/softwarebyze/Backgammon-Mastermind --skill native-data-fetching-softwarebyze
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/softwarebyze/Backgammon-Mastermind/tree/main/.agents/skills/native-data-fetching
Command: npx skills add https://github.com/softwarebyze/Backgammon-Mastermind --skill native-data-fetching-softwarebyze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of building dependable network and data-loading behavior in React Native/Expo apps, including consistent error handling, token-based authentication, and predictable caching or offline behavior.

Core Features & Use Cases

  • Deterministic networking with fetch: Implement API requests with correct JSON parsing, HTTP status checks, and typed error handling.
  • Stateful data management: Use caching and retry patterns with React Query (TanStack Query) for queries and mutations.
  • Expo Router route loading (web/SDK 55+): Apply loader-based data loading using Expo Router loaders where appropriate.
  • Security-aware auth: Manage auth tokens using SecureStore and attach tokens to requests safely.
  • Resilience: Handle offline status with NetInfo and integrate error recovery patterns.
  • Environment-safe configuration: Configure API endpoints via EXPO_PUBLIC_ variables and avoid exposing secrets unintentionally.

Quick Start

Use native-data-fetching to implement an authenticated GET request with proper error handling and optional React Query caching for a screen that loads user profile data from an API endpoint.

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 authenticated fetch requests in React Native with proper error handling?

Authenticated fetch requests in React Native require attaching SecureStore tokens to headers and validating HTTP status codes to provide typed error handling. This approach standardizes API behavior by ensuring correct JSON parsing and secure token management for reliable networking.

What is the best way to handle offline data fetching and caching in Expo apps?

Offline data fetching in Expo apps is handled by integrating NetInfo connectivity checks with React Query caching and retry patterns. This combination manages network state awareness and provides resilient data retrieval when connectivity drops.

Does this networking pattern support Expo Router loaders for data loading?

Yes, the networking pattern supports Expo Router loaders for route-based data loading on web and SDK 55+. It applies fetch-based data retrieval logic to loader functions, allowing server-side or client-side data fetching before screen rendering.

How do I configure API endpoints safely using Expo environment variables?

Configure API endpoints safely using EXPO_PUBLIC_ variables to expose client-safe URLs without leaking secrets. This environment-safe configuration separates public routing data from private keys, ensuring secure networking setup in Expo applications.

Can I use AbortController to cancel React Query mutations and queries?

Yes, you can use AbortController to cancel React Query mutations and queries by integrating it with the fetch-based networking layer. This optional integration standardizes request cancellation behavior for abandoned queries.

Why do I need typed errors for HTTP status validation in React Native fetch?

Typed errors for HTTP status validation are needed to standardize API failure behavior and ensure predictable error recovery patterns. Validating HTTP statuses and returning typed errors prevents silent failures during JSON parsing and network requests.