API Expert Skill

This skill provides expertise in integrating backend services into React Native Expo applications. It emphasizes reliability, performance, and clean architecture.

Core Principles

• Use expo/fetch: Always prefer expo/fetch over standard fetch or axios.
• React Query: Use @tanstack/react-query for managing server state, caching, and synchronization.
• Service Layer: Keep API logic in the services/ directory.
• Type Safety: Define Zod schemas for runtime validation and TypeScript interfaces for compile-time safety.

Instructions

1. Setup Client: Ensure the React Query client is configured in app/_layout.tsx.
2. Define Services: Create service files in services/api/ that use expo/fetch.
3. Custom Hooks: Wrap service calls in custom React Query hooks.
4. Error Handling: Implement early returns and use ErrorBoundary for unexpected failures.
5. Validation: Use Zod to validate API responses at the network boundary.

Example

// services/api/user-service.ts
import { fetch } from 'expo/fetch';
import { z } from 'zod';

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
});

export const fetchUser = async (id: string) => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) throw new Error('Failed to fetch user');
  const data = await response.json();
  return UserSchema.parse(data);
};

// hooks/use-user.ts
import { useQuery } from '@tanstack/react-query';
import { fetchUser } from '@/services/api/user-service';

export const useUser = (id: string) => {
  return useQuery({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
  });
};

See API Best Practices for more details.