🚀 GraphQL与REST在前端的应用

📅 发布于 2025年12月 | 👤 作者：博主 | 🏷️ 标签"GraphQL","REST", Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

总结

GraphQL和REST是两种不同的API设计方式，各有优势和适用场景。

GraphQL vs REST 对比表格：

场景 REST 方式 GraphQL 方式
获取用户头像+
最新3条推文		 GET /user/123 GET /user/123/tweets?limit=3 （2次请求） 1次请求： user(id:"123") { avatar, tweets(first:3) { text } }
只需用户名 GET /user/123 （返回10个字段，浪费8个） user(id:"123") { name } （只返回 name）

🌟 优势:

  • 🚀 杜绝过量/缺失数据 : GraphQL允许客户端指定它需要的数据结构和字段，这样服务器就只返回请求的那些数据，避免了过度获取或不足获取的问题，从而减少了数据传输量，提高了效率。
  • 🎯 一次请求，多资源获取: 在GraphQL中，客户端可以通过一个查询获得多个资源和关联数据，而不需要像REST那样发起多个HTTP请求，这简化了客户端的逻辑并可能减少网络延迟。

🌟 前端如何用 GraphQL？核心工具链:

  • 🚀 客户端库: 起步用 URQL + TypeScript（上手快、生态友好）。
  • 🎯 TypeScript 类型生成（强烈推荐！）:
    使用 graphql-codegen 自动生成：
    ✅ 查询/变更的 TypeScript 类型
    ✅ React/Vue 钩子（useUserQuery()）
    ✅ 输入变量校验（编译时报错，而非运行时） 
                    
                # 自动生成 types.ts 和 hooks.ts
                npx graphql-codegen --config codegen.ts
    → 从此告别 any 和手写接口，类型端到端安全。

🌟 场景1：精准获取嵌套数据（避免多轮请求）:

        const GET_USER = gql`
          query User($id: ID!) {
            user(id: $id) {
              name
              followers(first: 10) {
                nodes {
                  name
                  latestPost { title, likes }
                }
              }
            }
          }`;

🌟 场景2：实时更新（聊天、协作编辑）:

          
          // 订阅新消息（服务端推送）
          const SUBSCRIBE_MESSAGES = gql`
            subscription OnNewMessage($roomId: ID!) {
              messageAdded(roomId: $roomId) {
                id, text, sender { name }
              }
            }
          `;

          // React 中使用
          const [_, execute] = useSubscription({ query: SUBSCRIBE_MESSAGES });
← 返回首页