Skip to Content

API 规则

本规则针对 src/clients/** 目录下的 API 客户端文件,定义了 API 架构、SWR 数据获取、HTTP 方法使用和错误处理的最佳实践。通过统一的 API 调用模式,确保数据层的一致性和可维护性。

api-rules.mdc
--- globs: src/clients/** alwaysApply: false --- # API Client Rules ## API Client Architecture - Singleton pattern: Use single `apiClient` instance exported from `@/lib/api-client` - Method organization: Create separate client functions in `/src/clients/` organized by feature - Generic typing: Use TypeScript generics for type-safe API responses - Interceptor setup: Handle auth tokens and errors globally in ApiClient class ```ts import { apiClient, isMockResponse } from '@/lib/api-client' import type { UserInfo } from '@/types/user' const mockResponse: UserInfo = {...} export const getUserInfoKey = ... export const getUserInfo = async (): Promise<UserInfo> => { if (isMockResponse()) { return mockResponse } return apiClient.get<UserInfo>('/api/user-info') } ``` ## SWR Integration ```ts import useSWR, { mutate } from 'swr' import { getUserInfo, getUserInfoKey } from '@/clients/user/get-user-info' // In component const { data, error, isLoading } = useSWR( getUserInfoKey(id), () => getUserInfo(id) // DO NOT add custom options, already added in the global config ) // Refresh: mutate(getUserInfoKey(id)) ``` ## HTTP Methods ```ts // ✅ HTTP method usage const user = await apiClient.get<UserInfo>('/api/user/123') const { data, pagination } = await apiClient.getPaginated<Project>('/api/projects') const created = await apiClient.post<Project>('/api/projects', projectData) ``` ## Error Handling ```ts // ✅ Error handling pattern import { toast } from 'sonner' try { const data = await getUserInfo() toast.success('Data loaded successfully') } catch (error) { if (error instanceof ApiError) { toast.error(error.message, { description: 'Please try again later.', }) } } ```
最后更新于: