当前位置：首页 > news >正文

GraphQL 客户端：别再写冗长的 REST 请求了

news 2026/5/26 14:29:58

GraphQL 客户端：别再写冗长的 REST 请求了

毒舌时刻

这代码写得跟网红滤镜似的——仅供参考。

各位前端同行，咱们今天聊聊 GraphQL 客户端。别告诉我你还在写冗长的 REST 请求，那感觉就像用写信的方式发微信——能发，但太慢了。

为什么你需要 GraphQL

最近看到一个项目，一个页面要调 5 个 REST 接口，还要手动合并数据。我就想问：你是在写前端还是在写数据合并工具？

反面教材

// 反面教材：冗长的 REST 请求 // services/api.ts async function getDashboardData(userId: string) { // 请求用户信息 const userRes = await fetch(`/api/users/${userId}`); const user = await userRes.json(); // 请求用户订单 const ordersRes = await fetch(`/api/users/${userId}/orders`); const orders = await ordersRes.json(); // 请求订单详情（N+1 问题） const ordersWithDetails = await Promise.all( orders.map(async (order: any) => { const detailsRes = await fetch(`/api/orders/${order.id}/details`); const details = await detailsRes.json(); return { ...order, details }; }) ); // 请求推荐商品 const recommendationsRes = await fetch(`/api/users/${userId}/recommendations`); const recommendations = await recommendationsRes.json(); // 手动合并数据 return { user, orders: ordersWithDetails, recommendations }; } // 使用 const data = await getDashboardData('123'); // 发了 3 + N 个请求，还要手动合并 😭

毒舌点评：这代码，一个页面发 8 个请求，你是在写前端还是在写 DDoS 攻击工具？

GraphQL 的正确姿势

1. 基础查询

// 正确姿势：一个请求搞定所有 // queries/dashboard.ts import { gql } from '@apollo/client'; const GET_DASHBOARD = gql` query GetDashboard($userId: ID!) { user(id: $userId) { id name email avatar orders { id total status createdAt items { id name price quantity } } recommendations { id name price image } } } `; // 使用 import { useQuery } from '@apollo/client'; function Dashboard() { const { data, loading, error } = useQuery(GET_DASHBOARD, { variables: { userId: '123' } }); if (loading) return <div>加载中...</div>; if (error) return <div>错误: {error.message}</div>; const { user } = data; return ( <div> <h1>欢迎, {user.name}</h1> <OrderList orders={user.orders} /> <Recommendations items={user.recommendations} /> </div> ); }

2. 自动缓存

// 正确姿势：自动缓存 import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache({ typePolicies: { Query: { fields: { user: { merge(existing, incoming) { return incoming; } } } } } }) }); // 第一次请求 - 从服务器获取 const { data } = useQuery(GET_USER, { variables: { id: '1' } }); // 第二次请求 - 从缓存读取，瞬间完成！ const { data: cachedData } = useQuery(GET_USER, { variables: { id: '1' } });

3. 实时订阅

// 正确姿势：实时数据 // subscriptions/notifications.ts import { gql } from '@apollo/client'; const NOTIFICATIONS_SUBSCRIPTION = gql` subscription OnNotification { notification { id type message createdAt } } `; // 使用 import { useSubscription } from '@apollo/client'; function NotificationBell() { const { data } = useSubscription(NOTIFICATIONS_SUBSCRIPTION); useEffect(() => { if (data) { toast.info(data.notification.message); } }, [data]); return <BellIcon hasUnread={!!data} />; }

4. 乐观更新

// 正确姿势：乐观更新 // mutations/addToCart.ts import { gql } from '@apollo/client'; const ADD_TO_CART = gql` mutation AddToCart($productId: ID!, $quantity: Int!) { addToCart(productId: $productId, quantity: $quantity) { id items { id quantity product { name price } } total } } `; // 使用 import { useMutation } from '@apollo/client'; function ProductCard({ product }) { const [addToCart] = useMutation(ADD_TO_CART, { optimisticResponse: { addToCart: { id: 'temp-id', items: [ { id: 'temp-item', quantity: 1, product: { name: product.name, price: product.price, __typename: 'Product' }, __typename: 'CartItem' } ], total: product.price, __typename: 'Cart' } }, update(cache, { data: { addToCart } }) { cache.writeQuery({ query: GET_CART, data: { cart: addToCart } }); } }); return ( <button onClick={() => addToCart({ variables: { productId: product.id, quantity: 1 } })}> 加入购物车 </button> ); }

毒舌点评：这才叫现代数据获取，精确获取、自动缓存、实时更新。别告诉我你还在写 REST。

实战技巧：GraphQL 最佳实践

1. 代码生成

// codegen.ts import type { CodegenConfig } from '@graphql-codegen/cli'; const config: CodegenConfig = { schema: 'https://api.example.com/graphql', documents: ['src/**/*.tsx'], generates: { './src/gql/': { preset: 'client', plugins: [] } } }; export default config;

# 生成 TypeScript 类型 $ graphql-codegen # 生成的代码 // src/gql/graphql.ts export type GetUserQuery = { user: { id: string; name: string; email: string; } };

2. 错误处理

// 正确姿势：错误处理 import { onError } from '@apollo/client/link/error'; const errorLink = onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) { graphQLErrors.forEach(({ message, locations, path }) => { console.error( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` ); }); } if (networkError) { console.error(`[Network error]: ${networkError}`); } }); const client = new ApolloClient({ link: from([errorLink, httpLink]), cache: new InMemoryCache() });

3. 分页查询

// 正确姿势：分页 const GET_USERS = gql` query GetUsers($first: Int!, $after: String) { users(first: $first, after: $after) { edges { node { id name email } cursor } pageInfo { hasNextPage endCursor } } } `; function UserList() { const { data, fetchMore } = useQuery(GET_USERS, { variables: { first: 10 } }); const loadMore = () => { fetchMore({ variables: { after: data.users.pageInfo.endCursor } }); }; return ( <div> {data.users.edges.map(({ node }) => ( <UserCard key={node.id} user={node} /> ))} {data.users.pageInfo.hasNextPage && ( <button onClick={loadMore}>加载更多</button> )} </div> ); }

4. 文件上传

// 正确姿势：文件上传 const UPLOAD_FILE = gql` mutation UploadFile($file: Upload!) { uploadFile(file: $file) { id url filename } } `; function FileUpload() { const [uploadFile] = useMutation(UPLOAD_FILE); const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0]; if (file) { uploadFile({ variables: { file } }); } }; return <input type="file" onChange={handleChange} />; }

5. 常见陷阱

// 陷阱1：忘记使用 fragments // ❌ 重复定义字段 const QUERY1 = gql` query { user { id name email avatar } } `; const QUERY2 = gql` query { user { id name email avatar phone } } `; // ✅ 使用 fragment const USER_FIELDS = gql` fragment UserFields on User { id name email avatar } `; const QUERY1 = gql` ${USER_FIELDS} query { user { ...UserFields } } `; // 陷阱2：N+1 查询（虽然 GraphQL 也有这个问题） // 确保后端使用 DataLoader // 陷阱3：查询过大 // ❌ 查询所有字段 const BAD_QUERY = gql` query { users { id name email phone address orders { id items { id product { id name description price category { id name } } } } } } `; // ✅ 只查询需要的字段 const GOOD_QUERY = gql` query { users { id name email } } `;