React Data Fetching

Implementation Steps

1. Setup Fetcher Utility

Location: ./lib/fetcher.ts

Rules:

• Centralize all API request logic
• Handle authentication headers
• Include error handling
• Export single fetcher function

// ./lib/fetcher.ts (Web)
export const fetcher = async (url: string) => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${url}`, {
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
    },
  });

  if (!res.ok) throw new Error("Failed to fetch data");
  return res.json();
};

// ./lib/fetcher.ts (React Native)
export const fetcher = (url: string) => {
  const accessToken = useAuthStore.getState().accessToken;

  return fetch(`${API_URL}${url}`, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }).then(res => res.json());
};

2. Use SWR in Components

Location: Component files

Rules:

• Import fetcher from @/lib/fetcher
• Use TypeScript generics for type safety
• Match API endpoint patterns: /api/v{x}/resource
• Handle loading and error states
• Use mutate for manual revalidation

import useSWR from 'swr';
import { fetcher } from '@/lib/fetcher';

// In component
const { data, error, isLoading, mutate } = useSWR<ResponseType>(
  '/api/v1/endpoint',
  fetcher
);

3. Create Custom Hooks (Optional)

Location: ./hooks/useProducts.ts

Rules:

• Wrap SWR logic in custom hooks for reusability
• Export typed hook functions
• Keep hooks focused on single data source

// ./hooks/useProducts.ts
import useSWR from 'swr';
import { fetcher } from '@/lib/fetcher';

export function useProducts() {
  return useSWR('/api/v1/products', fetcher);
}