expo-data-fetching

Implements and debugs network requests, caching, and offline support in Expo apps.

Updated Sep 13, 2026
One-click install
npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-data-fetching-aadilmallick
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-data-fetching
Source: https://github.com/aadilmallick/myfitness-pal-clone/tree/main/.agents/skills/expo-data-fetching
Command: npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill expo-data-fetching-aadilmallick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, expo-secure-store, @react-native-community/netinfo, expo-router, expo-server, and includes references (resource) components.

What problem does it solve? Building reliable networking in Expo and React Native apps requires handling fetch errors, caching, authentication tokens, offline states, and loading/empty/error UI — this Skill provides tested patterns for all of them so you avoid common pitfalls like unhandled HTTP errors or insecure token storage. ## Core Features & Use Cases - Fetch & Error Handling: Typed API errors, retry with exponential backoff, and AbortController cancellation for fetch requests. - TanStack Query Integration: QueryClient setup, queries, mutations with draft preservation, and offline-first configuration synced with NetInfo. - Auth & Environment Config: Token storage in expo-secure-store, token refresh flows, and EXPO_PUBLIC_ environment variable management for dev/prod API URLs. - Expo Router Loaders: Route-level data loading with useLoaderData for web on SDK 55+, including server vs static rendering guidance. - Use Case: When a user asks "my app needs to work offline" or "how do I configure different API URLs for dev and prod", this Skill delivers the exact NetInfo + React Query persistence setup or .env configuration pattern. ## Quick Start Ask the assistant to set up data fetching with React Query and proper error handling for your Expo app screen.

Frequently Asked Questions about expo-data-fetching

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

FAQPage Schema
How do I make API calls in React Native with error handling?

Use the fetch API and always check response.ok before parsing JSON, throwing typed errors for HTTP failures. Wrap requests in a helper that distinguishes network errors from HTTP errors, and add retry logic with exponential backoff for transient failures.

Should I use React Query or SWR for data fetching?

React Query (TanStack Query) suits complex apps needing caching, mutations, offline persistence, and automatic cancellation. SWR or custom hooks work for simpler needs with basic caching and refetching requirements.

How do I store authentication tokens securely in Expo?

Store tokens in expo-secure-store, never in AsyncStorage which is unencrypted. Implement a token refresh flow that deduplicates concurrent refresh calls using a shared promise while a refresh is in progress.

Does Expo Router support route-level data loaders?

Yes, Expo SDK 55+ supports data loaders on web via expo-router with the unstable_useServerDataLoaders flag. Export an async loader function from a route file and consume it with useLoaderData; loaders are web-only, so use React Query or fetch on native.

How do I configure different API URLs for development and production?

Use EXPO_PUBLIC_ prefixed variables in .env.development and .env.production files, accessed via process.env. These are inlined at build time, so restart the dev server after changes, and never put secret keys in EXPO_PUBLIC_ variables.

Why does my React Query app not work offline?

React Query needs its onlineManager synced with NetInfo network status so queries pause when offline and resume on reconnect. Combine this with query persistence and render cached data with a nonblocking error when refreshes fail.