mobile-data-patterns

Implements TanStack Query, Zustand, and API client patterns for React Native data layers.

3|1|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill mobile-data-patterns-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-data-patterns
Source: https://github.com/nghyane/VSTEP/tree/main/apps/mobile-v2/.agents/skills/mobile-data-patterns
Command: npx skills add https://github.com/nghyane/VSTEP --skill mobile-data-patterns-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile developers often struggle with inconsistent server state management, token refresh handling, and scattered error handling in React Native apps. This Skill provides standardized patterns for the entire data layer so queries, mutations, and local stores behave predictably. ## Core Features & Use Cases - Server State Management: Standardized TanStack Query setup with global error handling, query key conventions, and mutation patterns with automatic 401 handling. - API Client Conventions: Typed API wrapper with snake_case/camelCase transforms, automatic response unwrapping, and token refresh via expo-secure-store. - Local State with Zustand: Patterns for coin, streak, and notification stores that sync with the backend on app launch. - Use Case: When building a new exam-listing screen, apply the query hook pattern with the correct queryKey format and let the global error handler manage auth failures instead of writing per-screen try/catch blocks. ## Quick Start Apply the mobile data patterns to create a TanStack Query hook and Zustand store for a new feature in the React Native app.

Frequently Asked Questions about mobile-data-patterns

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

FAQPage Schema
How do I set up TanStack Query in a React Native app?▼

Create a QueryClient with staleTime of 5 minutes and retry disabled, then attach a global error handler to both the query and mutation caches. The global handler logs out on 401 responses and shows alerts for other errors.

How to handle 401 token refresh in React Native API calls?▼

Store tokens in expo-secure-store and call a tryRefresh function when a 401 occurs. If refresh succeeds, retry the request; if it fails, clear SecureStore, clear the QueryClient cache, and redirect to login.

When should I use Zustand vs TanStack Query for state?▼

Use TanStack Query for server state like exams and user data fetched from the API. Use Zustand only for local state such as coin balance, streaks, and notifications, syncing with the backend through separate load functions.

Should I use try/catch in React Native components for API errors?▼

No, components should call mutation.mutate() without try/catch. The global QueryClient onError handler catches failures, handles 401 logout, and surfaces user-facing messages through React Native Alert.

How do I handle Laravel snake_case responses in React Native?▼

Transform keys automatically in the API client layer, converting Laravel snake_case responses to camelCase and outgoing request bodies back to snake_case. The client also unwraps the { data: T } response envelope into typed results.