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.