Overview

The TanStack AppOperation Requests kit standardizes how API calls are defined and consumed in React Native/Expo projects. It centralizes HTTP through appOperation.getRequest and wires requests via a QUERY_KEYS object, a Requests map, and a shared api.ts. A single showToast handler manages all success and error toasts, with optional per-call suppression and setToastHandler overrides.

How This Skill Works

Define stable query keys (QUERY_KEYS) and a Requests map that ties each key to an API endpoint in api.ts. All HTTP traffic routes through the single entry point appOperation.getRequest. TanStack Query hooks (useQuery/useMutation) call appOperation in their queryFn/mutationFn, and user feedback is delivered via a shared showToast handler, with per-call suppressToast to stay silent when needed.

When to Use It

• Adding a new API endpoint, hook, or screen that talks to the backend.
• Refactoring existing API calls to route through appOperation.getRequest.
• Centralizing user feedback with a single showToast handler (and optional setToastHandler).
• Building TanStack Query-based data fetching using appOperation in queryFn/mutationFn.
• Working in React Native/Expo projects that adopt the tanstack-appoperation-kit.

Quick Start

1. Step 1: Inspect AppOperation.ts, QUERY_KEYS, and your api.ts to understand the structure.
2. Step 2: Add or update an API call in the Requests map and expose a helper for consumers.
3. Step 3: Use a TanStack Query hook (useQuery/useMutation) that calls appOperation.getRequest in its queryFn/mutationFn, and optionally customize toasts.

Best Practices

• Keep appOperation.getRequest as the single HTTP entry point for all calls.
• Define all endpoints in a central api.ts with a QUERY_KEYS-driven Requests map.
• Use queryFn/mutationFn to call appOperation and avoid ad-hoc fetch calls.
• Leverage setToastHandler to customize toast behavior; use suppressToast: true for silent updates.
• Write typed query keys and test requests to ensure stability across components.

Example Use Cases

• Add a new GET API to api.ts's Requests and fetch it with useQuery.
• Create a POST mutation with useMutation and handle errors via showToast.
• Override toasts globally by calling setToastHandler with a custom showToast.
• Migrate a legacy fetch-based API call to appOperation.getRequest and the Requests map.
• Use a stable QUERY_KEYS object to ensure consistent keys across components.

Frequently Asked Questions