native-data-fetching

Implements React Query-based caching pipelines for Expo and React Native REST/GraphQL APIs with token management and offline awareness.

28|1|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/bidah/react-native-hifi --skill native-data-fetching-bidah
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/bidah/react-native-hifi/tree/main/skills/native-data-fetching
Command: npx skills add https://github.com/bidah/react-native-hifi --skill native-data-fetching-bidah

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill centralizes best practices for React Native data fetching so you avoid brittle HTTP layers, uncached requests, token leaks, and unhandled offline states.

Core Features & Use Cases

  • React Query orchestration for queries, mutations, infinite loading, and optimistic updates with standard configuration parameters.
  • Secure token-aware wrappers using expo-secure-store and NetInfo-aware cancellation for authenticated APIs and offline-aware screens.
  • Storage and caching strategy comparison advising between MMKV and AsyncStorage, plus request lifecycle handling for retries, invalidation, and aborts.
  • Use Case: Implement a paginated feed powered by React Query that caches data, refreshes tokens on 401, and gracefully handles connectivity drops.

Quick Start

Ask the native-data-fetching skill to architect secure React Query API calls with token refresh, offline detection, and cache invalidation.

Frequently Asked Questions about native-data-fetching

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

FAQPage Schema
How do I handle offline state and API data fetching in React Native?

Handle offline state and API data fetching in React Native by integrating NetInfo to detect connectivity drops and orchestrating React Query for cached queries, request cancellation, and graceful retries. This prevents unhandled offline errors.

What's the best way to configure React Query for paginated feeds in Expo?

The best way to configure React Query for paginated feeds in Expo is to orchestrate infinite loading queries with standard configuration parameters, managing cache invalidation and request lifecycle handling for reliable data fetching.

How do you manage secure authentication tokens for API calls in React Native?

Manage secure authentication tokens for API calls in React Native using secure token-aware wrappers built on expo-secure-store, allowing you to safely store credentials and automatically refresh tokens on 401 responses.

Should I use MMKV or AsyncStorage for caching React Query data?

Choosing between MMKV and AsyncStorage for caching React Query data depends on your storage strategy comparison, weighing MMKV's performance against AsyncStorage compatibility to determine the best fit for your persistence needs.

How do I automatically refresh expired tokens during React Native data fetching?

Automatically refresh expired tokens during React Native data fetching by implementing secure token-aware wrappers that intercept 401 responses, handle token refresh logic, and retry the original API request.

How do I cancel pending API requests when a React Native component unmounts?

Cancel pending API requests when a React Native component unmounts by leveraging React Query's built-in request lifecycle handling and NetInfo-aware cancellation policies to abort network interactions cleanly.