data-fetching_skill

Overview

This skill helps implement and debug any network request, API call, or data fetching flow in TypeScript projects (especially Expo/React Native). It covers fetch usage, React Query and SWR patterns, error handling, caching strategies, offline support, authentication, and environment configuration. Use it as the single reference for reliable, secure networking code and common pitfalls.

How this skill works

The skill inspects the networking use case and recommends the simplest reliable approach: use the fetch API with robust error handling for basic requests, and adopt React Query (TanStack Query) for caching, retries, deduplication, and offline-friendly flows. It provides patterns for token storage/refresh, AbortController for cancellation, NetInfo integration for connectivity, and environment variable setup for API endpoints.

When to use it

• Implementing or debugging any API request, including GET/POST and file uploads
• Adding caching, retries, or background refetching with React Query or SWR
• Handling authentication: secure token storage and refresh flows
• Implementing offline support and network-aware behavior
• Configuring API URLs and environment-specific settings

Best practices

• Prefer the native fetch API in Expo; wrap it with typed error handling and retries
• Store sensitive tokens in a secure store (expo-secure-store), not AsyncStorage
• Use React Query for complex apps: leverage staleTime, retries, and query invalidation
• Hook React Query to NetInfo via onlineManager so queries pause/resume on connectivity changes
• Place client-safe endpoints in EXPO_PUBLIC_ env vars and keep secrets server-side
• Use AbortController to cancel in-flight requests on unmount or navigation

Example use cases

• Simple GET user endpoint with fetch and explicit response.ok checks
• Form submission using useMutation and query invalidation to refresh lists
• Offline-first app that pauses queries while disconnected and resumes when online
• Secure auth flow that stores tokens in SecureStore and implements a single refresh flow
• Environment-based API client that reads EXPO_PUBLIC_API_URL and throws if missing