SWR for Data Fetching in React

SWR (stale-while-revalidate) provides elegant data fetching for React. Here's how to use it effectively.

Basic Setup#

// lib/fetcher.ts
export async function fetcher<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    const error = new Error('Fetch failed');
    error.info = await response.json();
    error.status = response.status;
    throw error;
  }

  return response.json();
}

// Global configuration
import { SWRConfig } from 'swr';

function App({ children }) {
  return (
    <SWRConfig
      value={{
        fetcher,
        revalidateOnFocus: true,
        revalidateOnReconnect: true,
        dedupingInterval: 2000,
        errorRetryCount: 3,
      }}
    >
      {children}
    </SWRConfig>
  );
}

Basic Data Fetching#

import useSWR from 'swr';

interface User {
  id: string;
  name: string;
  email: string;
}

function useUser(id: string) {
  const { data, error, isLoading, isValidating, mutate } = useSWR<User>(
    id ? `/api/users/${id}` : null, // null key skips fetch
    fetcher
  );

  return {
    user: data,
    isLoading,
    isValidating,
    isError: !!error,
    error,
    mutate,
  };
}

// Component usage
function UserProfile({ userId }: { userId: string }) {
  const { user, isLoading, isError } = useUser(userId);

  if (isLoading) return <Spinner />;
  if (isError) return <Error />;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Conditional Fetching#

// Conditional key
function useUserProfile(userId: string | null) {
  return useSWR(
    userId ? `/api/users/${userId}/profile` : null,
    fetcher
  );
}

// Dependent fetching
function useUserOrders(userId: string) {
  const { data: user } = useUser(userId);

  // Fetch orders only after user is loaded
  const { data: orders } = useSWR(
    user ? `/api/users/${user.id}/orders` : null,
    fetcher
  );

  return { user, orders };
}

// Multiple conditional keys
function useData() {
  const { data: user } = useSWR('/api/user', fetcher);
  const { data: posts } = useSWR(
    () => `/api/users/${user.id}/posts`,
    fetcher
  );
  // Function key throws if user is undefined, skipping fetch
}

Mutation and Revalidation#

import useSWRMutation from 'swr/mutation';

// Mutation with trigger
async function updateUser(url: string, { arg }: { arg: Partial<User> }) {
  const response = await fetch(url, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  });

  if (!response.ok) throw new Error('Update failed');
  return response.json();
}

function useUpdateUser(userId: string) {
  const { trigger, isMutating } = useSWRMutation(
    `/api/users/${userId}`,
    updateUser
  );

  return { updateUser: trigger, isUpdating: isMutating };
}

// Usage
function EditProfile({ userId }: { userId: string }) {
  const { user, mutate } = useUser(userId);
  const { updateUser, isUpdating } = useUpdateUser(userId);

  const handleSave = async (data: Partial<User>) => {
    try {
      // Optimistic update
      await mutate(
        updateUser(data),
        {
          optimisticData: { ...user, ...data },
          rollbackOnError: true,
          revalidate: false,
        }
      );
    } catch (error) {
      console.error('Update failed:', error);
    }
  };

  return (
    <form onSubmit={(e) => handleSave(getFormData(e))}>
      {/* form fields */}
      <button disabled={isUpdating}>
        {isUpdating ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

Optimistic Updates#

// Immediate UI update with rollback
function TodoList() {
  const { data: todos, mutate } = useSWR<Todo[]>('/api/todos', fetcher);

  const addTodo = async (text: string) => {
    const newTodo: Todo = {
      id: Date.now().toString(), // Temporary ID
      text,
      completed: false,
    };

    // Optimistically update UI
    mutate(
      async (currentTodos) => {
        const response = await fetch('/api/todos', {
          method: 'POST',
          body: JSON.stringify({ text }),
        });
        const createdTodo = await response.json();
        return [...(currentTodos || []), createdTodo];
      },
      {
        optimisticData: [...(todos || []), newTodo],
        rollbackOnError: true,
        populateCache: true,
        revalidate: false,
      }
    );
  };

  const toggleTodo = async (id: string) => {
    mutate(
      async (currentTodos) => {
        await fetch(`/api/todos/${id}/toggle`, { method: 'POST' });
        return currentTodos?.map((todo) =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        );
      },
      {
        optimisticData: todos?.map((todo) =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ),
        rollbackOnError: true,
      }
    );
  };

  return (
    <ul>
      {todos?.map((todo) => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Pagination#

// Basic pagination
function usePaginatedData(page: number) {
  return useSWR(`/api/items?page=${page}`, fetcher, {
    keepPreviousData: true, // Keep showing old data while fetching
  });
}

// Infinite loading
import useSWRInfinite from 'swr/infinite';

function useInfiniteItems() {
  const getKey = (pageIndex: number, previousPageData: Item[] | null) => {
    // Return null to stop fetching
    if (previousPageData && !previousPageData.length) return null;

    return `/api/items?page=${pageIndex}`;
  };

  const { data, size, setSize, isValidating, isLoading } = useSWRInfinite(
    getKey,
    fetcher
  );

  const items = data ? data.flat() : [];
  const isLoadingMore = isLoading || (size > 0 && !data?.[size - 1]);
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < 20);

  return {
    items,
    isLoading,
    isLoadingMore,
    isReachingEnd,
    loadMore: () => setSize(size + 1),
  };
}

// Usage
function InfiniteList() {
  const { items, isLoadingMore, isReachingEnd, loadMore } = useInfiniteItems();

  return (
    <div>
      {items.map((item) => (
        <ItemCard key={item.id} item={item} />
      ))}

      <button onClick={loadMore} disabled={isLoadingMore || isReachingEnd}>
        {isLoadingMore ? 'Loading...' : isReachingEnd ? 'No more' : 'Load more'}
      </button>
    </div>
  );
}

Error Handling#

// Global error handling
<SWRConfig
  value={{
    onError: (error, key) => {
      if (error.status !== 403 && error.status !== 404) {
        // Report to error tracking
        reportError(error);
      }
    },
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
      // Never retry on 404
      if (error.status === 404) return;

      // Only retry up to 3 times
      if (retryCount >= 3) return;

      // Retry after 5 seconds
      setTimeout(() => revalidate({ retryCount }), 5000);
    },
  }}
>
  {children}
</SWRConfig>

// Per-hook error handling
function useUserWithRetry(id: string) {
  return useSWR(`/api/users/${id}`, fetcher, {
    onError: (error) => {
      toast.error(`Failed to load user: ${error.message}`);
    },
    errorRetryCount: 3,
    errorRetryInterval: 1000,
  });
}

Preloading#

import { preload } from 'swr';

// Preload on hover
function UserLink({ userId }: { userId: string }) {
  const handleMouseEnter = () => {
    preload(`/api/users/${userId}`, fetcher);
  };

  return (
    <Link href={`/users/${userId}`} onMouseEnter={handleMouseEnter}>
      View User
    </Link>
  );
}

// Preload in route handlers
// pages/users/[id].tsx
export async function getServerSideProps({ params }) {
  const user = await fetcher(`/api/users/${params.id}`);

  return {
    props: {
      fallback: {
        [`/api/users/${params.id}`]: user,
      },
    },
  };
}

function UserPage({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <UserProfile />
    </SWRConfig>
  );
}

Best Practices#

Keys:
✓ Use consistent key patterns
✓ Include all dependencies in key
✓ Use null to skip fetching
✓ Consider key serialization

Caching:
✓ Set appropriate dedupingInterval
✓ Use keepPreviousData for pagination
✓ Configure revalidation strategies
✓ Use fallback for SSR

Mutations:
✓ Use optimistic updates for UX
✓ Always handle rollback
✓ Revalidate related data
✓ Show loading states

SWR provides elegant, declarative data fetching with built-in caching and revalidation. Use optimistic updates for responsive UIs, infinite loading for lists, and proper error handling for resilience. The stale-while-revalidate strategy ensures users always see data quickly while keeping it fresh.