How to generate data fetching code with Cursor

1// Cursor Chat prompt (Cmd+L):
2// Create a typed fetcher function for SWR at
3// src/lib/fetcher.ts. It should: use the API_BASE_URL
4// from environment, include auth token from localStorage,
5// throw typed errors with status code and message,
6// handle JSON parsing, and be generic over the response type.
7
8import { config } from '@/config/env';
9
10export class FetchError extends Error {
11  constructor(public status: number, message: string) {
12    super(message);
13    this.name = 'FetchError';
14  }
15}
16
17export async function fetcher<T>(url: string): Promise<T> {
18  const token = localStorage.getItem('auth_token');
19  const res = await fetch(`${config.apiBaseUrl}${url}`, {
20    headers: {
21      'Content-Type': 'application/json',
22      ...(token ? { Authorization: `Bearer ${token}` } : {}),
23    },
24  });
25  if (!res.ok) {
26    throw new FetchError(res.status, await res.text());
27  }
28  return res.json();
29}

1---
2description: SWR data fetching conventions
3globs: "src/hooks/**/*.ts,src/hooks/**/*.tsx"
4alwaysApply: true
5---
6
7## SWR Hook Rules
8- ALWAYS import fetcher from @/lib/fetcher
9- ALWAYS type the return value with SWR's generic: useSWR<Type>
10- ALWAYS handle loading, error, and data states in returned object
11- Name hooks as use{Resource}: useUsers, useOrder, useProducts
12- Place all hooks in src/hooks/
13- Use SWR keys as API paths: '/users', '/orders/123'
14- Include mutate function in return for cache invalidation
15- NEVER create inline fetch calls inside components

1// Cursor Chat prompt (Cmd+L):
2// @src/lib/fetcher.ts @src/types/user.ts
3// Generate a useUser(id) hook using SWR that:
4// - Fetches from /users/:id
5// - Returns { user, isLoading, isError, mutate }
6// - Only fetches when id is provided
7// - Uses our typed fetcher
8
9import useSWR from 'swr';
10import { fetcher } from '@/lib/fetcher';
11import type { User } from '@/types/user';
12
13export function useUser(id: string | undefined) {
14  const { data, error, isLoading, mutate } = useSWR<User>(
15    id ? `/users/${id}` : null,
16    fetcher
17  );
18
19  return {
20    user: data,
21    isLoading,
22    isError: !!error,
23    error,
24    mutate,
25  };
26}

1// Cursor Chat prompt (Cmd+L):
2// @src/lib/fetcher.ts @src/types/api.ts
3// Generate a useUsers hook that fetches a paginated list
4// from /users?page=N&limit=N. Return users array, total
5// count, loading state, error, and a setPage function.
6// Use SWR with the page number in the key.
7
8import useSWR from 'swr';
9import { useState } from 'react';
10import { fetcher } from '@/lib/fetcher';
11import type { PaginatedResponse } from '@/types/api';
12import type { User } from '@/types/user';
13
14export function useUsers(limit = 20) {
15  const [page, setPage] = useState(1);
16  const { data, error, isLoading, mutate } = useSWR<PaginatedResponse<User>>(
17    `/users?page=${page}&limit=${limit}`,
18    fetcher
19  );
20
21  return {
22    users: data?.items ?? [],
23    total: data?.total ?? 0,
24    page,
25    setPage,
26    isLoading,
27    isError: !!error,
28    mutate,
29  };
30}

1// Cursor Chat prompt (Cmd+L):
2// @src/hooks/useUser.ts @src/lib/fetcher.ts
3// Add a useUpdateUser hook that:
4// - Takes userId
5// - Returns an updateUser(data) async function
6// - Sends PUT /users/:id with the data
7// - Calls mutate() from useUser to revalidate the cache
8// - Uses optimistic updates
9
10import useSWRMutation from 'swr/mutation';
11import type { User } from '@/types/user';
12import { config } from '@/config/env';
13
14async function updateUserFn(
15  url: string,
16  { arg }: { arg: Partial<User> }
17) {
18  const res = await fetch(`${config.apiBaseUrl}${url}`, {
19    method: 'PUT',
20    headers: { 'Content-Type': 'application/json' },
21    body: JSON.stringify(arg),
22  });
23  if (!res.ok) throw new Error('Update failed');
24  return res.json();
25}
26
27export function useUpdateUser(id: string) {
28  return useSWRMutation(`/users/${id}`, updateUserFn);
29}