agents: Skill for Claude Code

Expo Networking

You MUST use this skill for ANY networking work including API requests, data fetching, caching, or network debugging.

References

Consult these resources as needed:

references/
  expo-router-loaders.md   Route-level data loading with Expo Router loaders (web, SDK 55+)

When to Use

Use this skill when:

• Implementing API requests
• Setting up data fetching (React Query, SWR)
• Using Expo Router data loaders (useLoaderData, web SDK 55+)
• Debugging network failures
• Implementing caching strategies
• Handling offline scenarios
• Authentication/token management
• Configuring API URLs and environment variables

Preferences

• Avoid axios, prefer expo/fetch

Common Issues & Solutions

1. Basic Fetch Usage

Simple GET request:

const fetchUser = async (userId: string) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return response.json();
};

POST request with body (use apiClient — token is injected automatically, see Section 4):

import { apiClient } from "@/lib/api-client";

const createUser = async (userData: UserData) => {
  return apiClient.post<User>("/users", userData);
};

---

### 2. React Query (TanStack Query)

**Setup**:

```tsx
// app/_layout.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 2,
    },
  },
});

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack />
    </QueryClientProvider>
  );
}

Fetching data:

import { useQuery } from "@tanstack/react-query";

function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetchUser(userId),
  });