skills.rest
Ahmed-Eldalatony
Ahmed-EldalatonyCOMMUNITY
Explore all skills by this author →
GitHub

native-data-fetching

Implements network requests, caching, and offline handling for Expo and React Native apps.

Updated Mar 22, 2026
Search Tags:#data fetching#networking#react native#api client#react query#expo#offline support
One-click install
npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill native-data-fetching-ahmed-eldalatony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/Ahmed-Eldalatony/airbnb-clone-bench/tree/main/.agents/skills/native-data-fetching
Command: npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill native-data-fetching-ahmed-eldalatony

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 React Native and Expo apps requires juggling fetch calls, error handling, token management, caching, and offline behavior, and mistakes in any of these lead to crashes, stale data, or leaked credentials. ## Core Features & Use Cases - Fetch and Error Handling Patterns: Provides typed error classes, retry logic with exponential backoff, and AbortController-based request cancellation. - React Query Integration: Covers QueryClient setup, queries, mutations, cache invalidation, and offline-aware synchronization with NetInfo. - Authentication and Secure Storage: Demonstrates token storage with expo-secure-store, authenticated fetch wrappers, and token refresh flows. - Expo Router Data Loaders: Documents route-level loaders with useLoaderData, StatusError, and server versus static rendering modes via the references guide. - Use Case: When a user asks how to configure different API URLs for development and production, the Skill explains EXPO_PUBLIC_ environment variables and .env file conventions. ## Quick Start Ask how to fetch data from an API in your Expo app with proper error handling and caching, and apply the provided fetch or React Query patterns.

Frequently Asked Questions about native-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 fetch?▼

Use the fetch API with async/await and always check response.ok before parsing JSON, throwing a typed error with the HTTP status on failure. Wrap calls in a helper that catches network errors separately from HTTP errors for clearer debugging.

Should I use React Query or SWR for data fetching?▼

React Query suits complex apps needing mutations, cache invalidation, and offline persistence, while SWR fits simpler fetching needs. React Query also integrates with NetInfo through onlineManager to pause queries when the device goes offline.

How do I store authentication tokens securely in Expo?▼

Store tokens with expo-secure-store, which uses the device keychain, instead of AsyncStorage which is not encrypted. Combine it with an authenticated fetch wrapper that attaches the Bearer token and a refresh flow for expired tokens.

Does Expo Router support server-side data loading?▼

Yes, Expo SDK 55+ supports route-level loaders on web using the loader export and useLoaderData hook. Enable unstable_useServerDataLoaders in the expo-router plugin config, with server or static output modes controlling when loaders run.

How do I use different API URLs for development and production in Expo?▼

Define EXPO_PUBLIC_API_URL in .env.development and .env.production files, then read it via process.env in your API client. Only EXPO_PUBLIC_ prefixed variables reach the client bundle, so keep secrets in non-prefixed variables used only server-side.

Why do my fetch requests keep running after the component unmounts?▼

Requests continue because fetch is not automatically cancelled. Pass an AbortController signal to fetch and call controller.abort() in the useEffect cleanup, or use React Query which handles cancellation automatically on unmount.

Related Skills

Explore More Software Engineering Skills→
muhammaddadumuhammaddadu
1

native-data-fetching

Implement and debug data fetching in React Native and Expo apps with caching, offline support, and authentication.

Community
Intermediate
justincoursesjustincourses
2

deployment

Deploy Expo apps to iOS, Android, web hosting, and API routes with EAS.

Community
Advanced
serkan-ozalserkan-ozal
7

api-testing

Mock API responses and intercept HTTP requests in browser automation.

Community
Intermediate
yehezkieldioyehezkieldio

trpc

Implements end-to-end type-safe tRPC APIs with React Query and Next.js integration.

Community
Advanced