GraphQL 入门API 开发的新范式什么是 GraphQLGraphQL 是一种用于 API 的查询语言由 Facebook 在 2012 年开发并于 2015 年开源。它提供了一种更高效、更灵活的数据获取方式。GraphQL vs REST特性RESTGraphQL数据获取多个请求单个请求响应数据固定结构按需获取API 版本需要版本控制无需版本控制错误处理HTTP 状态码统一错误格式GraphQL 核心概念1. Schema模式定义数据结构和可用操作type User { id: ID! name: String! email: String! posts: [Post!]! } type Post { id: ID! title: String! content: String! author: User! } type Query { user(id: ID!): User posts: [Post!]! } type Mutation { createUser(name: String!, email: String!): User }2. Query查询获取数据query GetUserWithPosts { user(id: 1) { id name email posts { title content } } }3. Mutation变更修改数据mutation CreateUser { createUser(name: John, email: johnexample.com) { id name email } }搭建 GraphQL 服务器使用 Apollo Serverconst { ApolloServer, gql } require(apollo-server); const typeDefs gql type Query { hello: String } ; const resolvers { Query: { hello: () Hello world! } }; const server new ApolloServer({ typeDefs, resolvers }); server.listen().then(({ url }) { console.log(Server ready at ${url}); });Resolvers解析器const resolvers { Query: { user: (parent, args, context, info) { return users.find(user user.id args.id); }, posts: () posts }, User: { posts: (parent) { return posts.filter(post post.authorId parent.id); } } };GraphQL 查询深度解析查询变量query GetUser($userId: ID!) { user(id: $userId) { name email } }{ userId: 1 }片段Fragmentsfragment UserFields on User { id name email } query GetUsers { users { ...UserFields } }指令Directivesquery GetUser($withPosts: Boolean!) { user(id: 1) { name posts include(if: $withPosts) { title } } }实际应用场景场景一前端数据获取import { ApolloClient, InMemoryCache, gql } from apollo/client; const client new ApolloClient({ uri: http://localhost:4000/graphql, cache: new InMemoryCache() }); client.query({ query: gql query GetUser { user(id: 1) { name email } } }).then(result console.log(result));场景二分页查询query GetPosts($offset: Int!, $limit: Int!) { posts(offset: $offset, limit: $limit) { edges { node { title content } } pageInfo { hasNextPage hasPreviousPage } } }场景三实时数据Subscriptionssubscription NewPost { newPost { id title content } }安全与性能查询深度限制const server new ApolloServer({ typeDefs, resolvers, validationRules: [ depthLimit(5) ] });查询复杂度分析const server new ApolloServer({ typeDefs, resolvers, validationRules: [ complexityLimit(1000) ] });缓存策略const cache new InMemoryCache({ typePolicies: { Query: { fields: { posts: { merge(existing, incoming) { return [...existing, ...incoming]; } } } } } });总结GraphQL 为 API 开发带来了革命性的变化高效的数据获取按需获取所需数据灵活的查询方式支持复杂查询和嵌套关系强类型系统提供更好的开发体验和错误检测实时数据支持通过 Subscriptions 实现实时更新无论是前端开发还是后端架构掌握 GraphQL 都将成为一项重要技能。它不仅能提高开发效率还能改善用户体验。
GraphQL 入门:API 开发的新范式
发布时间:2026/5/22 17:58:24
GraphQL 入门API 开发的新范式什么是 GraphQLGraphQL 是一种用于 API 的查询语言由 Facebook 在 2012 年开发并于 2015 年开源。它提供了一种更高效、更灵活的数据获取方式。GraphQL vs REST特性RESTGraphQL数据获取多个请求单个请求响应数据固定结构按需获取API 版本需要版本控制无需版本控制错误处理HTTP 状态码统一错误格式GraphQL 核心概念1. Schema模式定义数据结构和可用操作type User { id: ID! name: String! email: String! posts: [Post!]! } type Post { id: ID! title: String! content: String! author: User! } type Query { user(id: ID!): User posts: [Post!]! } type Mutation { createUser(name: String!, email: String!): User }2. Query查询获取数据query GetUserWithPosts { user(id: 1) { id name email posts { title content } } }3. Mutation变更修改数据mutation CreateUser { createUser(name: John, email: johnexample.com) { id name email } }搭建 GraphQL 服务器使用 Apollo Serverconst { ApolloServer, gql } require(apollo-server); const typeDefs gql type Query { hello: String } ; const resolvers { Query: { hello: () Hello world! } }; const server new ApolloServer({ typeDefs, resolvers }); server.listen().then(({ url }) { console.log(Server ready at ${url}); });Resolvers解析器const resolvers { Query: { user: (parent, args, context, info) { return users.find(user user.id args.id); }, posts: () posts }, User: { posts: (parent) { return posts.filter(post post.authorId parent.id); } } };GraphQL 查询深度解析查询变量query GetUser($userId: ID!) { user(id: $userId) { name email } }{ userId: 1 }片段Fragmentsfragment UserFields on User { id name email } query GetUsers { users { ...UserFields } }指令Directivesquery GetUser($withPosts: Boolean!) { user(id: 1) { name posts include(if: $withPosts) { title } } }实际应用场景场景一前端数据获取import { ApolloClient, InMemoryCache, gql } from apollo/client; const client new ApolloClient({ uri: http://localhost:4000/graphql, cache: new InMemoryCache() }); client.query({ query: gql query GetUser { user(id: 1) { name email } } }).then(result console.log(result));场景二分页查询query GetPosts($offset: Int!, $limit: Int!) { posts(offset: $offset, limit: $limit) { edges { node { title content } } pageInfo { hasNextPage hasPreviousPage } } }场景三实时数据Subscriptionssubscription NewPost { newPost { id title content } }安全与性能查询深度限制const server new ApolloServer({ typeDefs, resolvers, validationRules: [ depthLimit(5) ] });查询复杂度分析const server new ApolloServer({ typeDefs, resolvers, validationRules: [ complexityLimit(1000) ] });缓存策略const cache new InMemoryCache({ typePolicies: { Query: { fields: { posts: { merge(existing, incoming) { return [...existing, ...incoming]; } } } } } });总结GraphQL 为 API 开发带来了革命性的变化高效的数据获取按需获取所需数据灵活的查询方式支持复杂查询和嵌套关系强类型系统提供更好的开发体验和错误检测实时数据支持通过 Subscriptions 实现实时更新无论是前端开发还是后端架构掌握 GraphQL 都将成为一项重要技能。它不仅能提高开发效率还能改善用户体验。