Agent Skills
Discover and share powerful Agent Skills for AI assistants
native-data-fetching - Agent Skill - Agent Skills
/ Skills / native-data-fetching Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i expo/skills/plugins/expo-app-design/skills/native-data-fetchingMethod 2 - openskills (supports sync & update)
npx openskills install expo/skillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
Claude Code Cursor OpenCode Gemini CLI Codex CLI
~/.claude/skills/native-data-fetching/ Back No setup needed. Let our cloud agents run this skill for you.
Select Model
Claude Haiku 4.5 $0.10 Claude Sonnet 4.5 $0.20 Claude Opus 4.5 $0.50 Claude Sonnet 4.5 $0.20 /task
Best for coding tasks
No setup required
You MUST use this skill for ANY networking work including API requests, data fetching, caching, or network debugging.
Use this router when:
Implementing API requests
Setting up data fetching (React Query, SWR)
Debugging network failures
Implementing caching strategies
Handling offline scenarios
Authentication/token management
Configuring API URLs and environment variables
Avoid axios, prefer expo/fetch
Simple GET request :
const fetchUser = async ( userId : string ) => { const response = await fetch ( `https://api.example.com/users/${ userId }` );
if ( ! response.ok) { throw new Error ( `HTTP error! status: ${ response . status }` ); }
return response. json (); }; POST request with body :
const createUser = async ( userData : UserData ) => { const response = await fetch ( "https://api.example.com/users" , { method: "POST" , headers: { "Content-Type" : "application/json" , Authorization: `Bearer ${ token }` , Setup :
// app/_layout.tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query" ;
const queryClient = new QueryClient ({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5 , // 5 minutes retry: 2 , }, }, });
export default Fetching data :
import { useQuery } from "@tanstack/react-query" ;
function UserProfile ({ userId } : { userId : string }) { const { data , isLoading , error , refetch } = useQuery ({ queryKey: [ "user" , userId], queryFn : () Mutations :
import { useMutation, useQueryClient } from "@tanstack/react-query" ;
function CreateUserForm () { const queryClient = useQueryClient ();
const mutation = useMutation ({ mutationFn: createUser, onSuccess : () => { // Invalidate and refetch queryClient. invalidateQueries ({ queryKey: [ "users" Comprehensive error handling :
class ApiError extends Error { constructor ( message : string , public status : number , public code ?: string ) { super (message); this .name = "ApiError" ; } Retry logic :
const fetchWithRetry = async ( url : string , options ?: RequestInit , retries = 3 ) => { for ( let i = 0 ; i < retries; i ++ ) { try { return await Token management :
import * as SecureStore from "expo-secure-store" ;
const TOKEN_KEY = "auth_token" ;
export const auth = { getToken : () => SecureStore. getItemAsync ( TOKEN_KEY ), setToken : ( token : string Token refresh :
let isRefreshing = false ; let refreshPromise : Promise < string > | null = null ;
const getValidToken = async () : Promise < string > => { const token = await auth. Check network status :
import NetInfo from "@react-native-community/netinfo" ;
// Hook for network status function useNetworkStatus () { const [ isOnline , setIsOnline ] = useState ( true );
useEffect (() => { return NetInfo. addEventListener (( state ) => { setIsOnline Offline-first with React Query :
import { onlineManager } from "@tanstack/react-query" ; import NetInfo from "@react-native-community/netinfo" ;
// Sync React Query with network status onlineManager. setEventListener (( setOnline ) => { return NetInfo. addEventListener (( state ) => { setOnline (state.isConnected ?? true ); }); Using environment variables for API configuration :
Expo supports environment variables with the EXPO_PUBLIC_ prefix. These are inlined at build time and available in your JavaScript code.
// .env EXPO_PUBLIC_API_URL = https : //api.example.com EXPO_PUBLIC_API_VERSION = v1
// Usage in code const API_URL = process.env. EXPO_PUBLIC_API_URL ;
const fetchUsers = async () => { const response = await fetch ( `${ API_URL }/users` ); Environment-specific configuration :
// .env.development EXPO_PUBLIC_API_URL = http : //localhost:3000
// .env.production EXPO_PUBLIC_API_URL = https : //api.production.com Creating an API client with environment config :
// api/client.ts const BASE_URL = process.env. EXPO_PUBLIC_API_URL ;
if ( ! BASE_URL ) { throw new Error ( "EXPO_PUBLIC_API_URL is not defined" ); }
export const apiClient = { get : async Important notes :
Only variables prefixed with EXPO_PUBLIC_ are exposed to the client bundle
Never put secrets (API keys with write access, database passwords) in EXPO_PUBLIC_ variables—they're visible in the built app
Environment variables are inlined at build time , not runtime
Restart the dev server after changing .env files
For server-side secrets in API routes, use variables without the EXPO_PUBLIC_ prefix
TypeScript support :
// types/env.d.ts declare global { namespace NodeJS { interface ProcessEnv { EXPO_PUBLIC_API_URL : string ; EXPO_PUBLIC_API_VERSION ?: string ; } } }
export {}; Cancel on unmount :
useEffect (() => { const controller = new AbortController ();
fetch (url, { signal: controller.signal }) . then (( response ) => response. json ()) . then (setData) . catch (( error ) => { if (error.name !== With React Query (automatic):
// React Query automatically cancels requests when queries are invalidated // or components unmount User asks about networking
|-- Basic fetch?
| \-- Use fetch API with error handling
|
|-- Need caching/state management?
| |-- Complex app -> React Query (TanStack Query)
| \-- Simpler needs -> SWR or custom hooks
|
|-- Authentication?
| |-- Token storage -> expo-secure-store
| \-- Token refresh -> Implement refresh flow
|
|-- Error handling?
| |-- Network errors -> Check connectivity first
| |-- HTTP errors -> Parse response, throw typed errors
| \-- Retries -> Exponential backoff
|
|-- Offline support?
| |-- Check status -> NetInfo
| \-- Queue requests -> React Query persistence
|
|-- Environment/API config?
| |-- Client-side URLs -> EXPO_PUBLIC_ prefix in .env
| |-- Server secrets -> Non-prefixed env vars (API routes only)
| \-- Multiple environments -> .env.development, .env.production
|
\-- Performance?
|-- Caching -> React Query with staleTime
|-- Deduplication -> React Query handles this
\-- Cancellation -> AbortController or React Query
Wrong: No error handling
const data = await fetch (url). then (( r ) => r. json ()); Right: Check response status
const response = await fetch (url); if ( ! response.ok) throw new Error ( `HTTP ${ response . status }` ); const data = await response. json (); Wrong: Storing tokens in AsyncStorage
await AsyncStorage. setItem ( "token" , token); // Not secure! Right: Use SecureStore for sensitive data
await SecureStore. setItemAsync ( "token" , token); User: "How do I make API calls in React Native?"
-> Use fetch, wrap with error handling
User: "Should I use React Query or SWR?"
-> React Query for complex apps, SWR for simpler needs
User: "My app needs to work offline"
-> Use NetInfo for status, React Query persistence for caching
User: "How do I handle authentication tokens?"
-> Store in expo-secure-store, implement refresh flow
User: "API calls are slow"
-> Check caching strategy, use React Query staleTime
User: "How do I configure different API URLs for dev and prod?"
-> Use EXPOPUBLIC env vars with .env.development and .env.production files
User: "Where should I put my API key?"
-> Client-safe keys: EXPOPUBLIC in .env. Secret keys: non-prefixed env vars in API routes only
},
body: JSON . stringify (userData),
});
if ( ! response.ok) {
const error = await response. json ();
throw new Error (error.message);
}
return response. json ();
};
function
RootLayout
() {
return (
< QueryClientProvider client = {queryClient}>
< Stack />
</ QueryClientProvider >
);
}
=>
fetchUser
(userId),
});
if (isLoading) return < Loading />;
if (error) return < Error message = {error.message} />;
return < Profile user = {data} />;
}
] });
},
});
const handleSubmit = ( data : UserData ) => {
mutation. mutate (data);
};
return < Form onSubmit = {handleSubmit} isLoading = {mutation.isPending} />;
}
}
const fetchWithErrorHandling = async ( url : string , options ?: RequestInit ) => {
try {
const response = await fetch (url, options);
if ( ! response.ok) {
const error = await response. json (). catch (() => ({}));
throw new ApiError (
error.message || "Request failed" ,
response.status,
error.code
);
}
return response. json ();
} catch (error) {
if (error instanceof ApiError ) {
throw error;
}
// Network error (no internet, timeout, etc.)
throw new ApiError ( "Network error" , 0 , "NETWORK_ERROR" );
}
};
fetchWithErrorHandling
(url, options);
} catch (error) {
if (i === retries - 1 ) throw error;
// Exponential backoff
await new Promise (( r ) => setTimeout (r, Math. pow ( 2 , i) * 1000 ));
}
}
};
)
=>
SecureStore.
setItemAsync
(
TOKEN_KEY
, token),
removeToken : () => SecureStore. deleteItemAsync ( TOKEN_KEY ),
};
// Authenticated fetch wrapper
const authFetch = async ( url : string , options : RequestInit = {}) => {
const token = await auth. getToken ();
return fetch (url, {
... options,
headers: {
... options.headers,
Authorization: token ? `Bearer ${ token }` : "" ,
},
});
};
getToken
();
if ( ! token || isTokenExpired (token)) {
if ( ! isRefreshing) {
isRefreshing = true ;
refreshPromise = refreshToken (). finally (() => {
isRefreshing = false ;
refreshPromise = null ;
});
}
return refreshPromise ! ;
}
return token;
};
(state.isConnected
??
true
);
});
}, []);
return isOnline;
}
});
// Queries will pause when offline and resume when online
return
response.
json
();
};
<
T
,>(
path
:
string
)
:
Promise
<
T
>
=>
{
const response = await fetch ( `${ BASE_URL }${ path }` );
if ( ! response.ok) throw new Error ( `HTTP ${ response . status }` );
return response. json ();
},
post : async < T ,>( path : string , body : unknown ) : Promise < T > => {
const response = await fetch ( `${ BASE_URL }${ path }` , {
method: "POST" ,
headers: { "Content-Type" : "application/json" },
body: JSON . stringify (body),
});
if ( ! response.ok) throw new Error ( `HTTP ${ response . status }` );
return response. json ();
},
};
"AbortError"
) {
setError (error);
}
});
return () => controller. abort ();
}, [url]);
Claude Sonnet 4.5