GraphQL 让你的 API 易于扩展和升级-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 应用程序中，API 是不可或缺的一部分。API 可以让前端应用程序与后端服务器进行交互，从而实现数据的传输和处理。然而，传统的 REST API 存在一些问题，比如查询效率低下、数据冗余等。这些问题可以通过使用 GraphQL 解决。

什么是 GraphQL

GraphQL 是一种由 Facebook 开发的数据查询语言和运行时环境，用于构建 API。GraphQL 可以让客户端应用程序精确地指定其需要的数据，从而避免了传统 REST API 中的一些问题。GraphQL 的特点包括：

灵活性：客户端可以精确地指定需要的数据，而无需从服务器获取不需要的数据。
高效性：GraphQL 可以在单个请求中获取多个数据，并且可以在客户端和服务器之间缓存查询结果。
易于扩展：GraphQL 的类型系统可以轻松地扩展和修改。

GraphQL 的基本概念

在使用 GraphQL 之前，需要了解一些基本概念。

Schema

GraphQL 使用 Schema 来定义 API 中可用的类型和操作。Schema 定义了数据模型和数据操作之间的关系。

Query

Query 是用于从服务器获取数据的 GraphQL 操作。Query 可以指定请求的数据和返回的数据格式。

Mutation

Mutation 是用于在服务器上执行更改的 GraphQL 操作。Mutation 可以指定要更改的数据和更改后的数据格式。

Resolver

Resolver 是用于将 Query 和 Mutation 转换为实际数据的函数。

GraphQL 的示例代码

下面是一个使用 GraphQL 的示例代码，其中包括 Schema、Query 和 Resolver。

Schema

// javascriptcn.com 代码示例
type User {
  id: ID!
  name: String!
  age: Int!
}

type Query {
  user(id: ID!): User
}

type Mutation {
  createUser(name: String!, age: Int!): User
}

Query Resolver

// javascriptcn.com 代码示例
const users = [
  { id: '1', name: 'Alice', age: 20 },
  { id: '2', name: 'Bob', age: 21 }
];

const getUserById = (id) => {
  return users.find(user => user.id === id);
};

const resolvers = {
  Query: {
    user: (_, { id }) => {
      return getUserById(id);
    }
  }
};

export default resolvers;

Mutation Resolver

// javascriptcn.com 代码示例
const createUser = ({ name, age }) => {
  const id = String(users.length + 1);
  const user = { id, name, age };
  users.push(user);
  return user;
};

const resolvers = {
  Mutation: {
    createUser: (_, { name, age }) => {
      return createUser({ name, age });
    }
  }
};

export default resolvers;

总结

GraphQL 是一个灵活、高效和易于扩展的 API 构建工具。使用 GraphQL 可以解决传统 REST API 中存在的一些问题。在实际开发中，需要了解 GraphQL 的基本概念和使用方法，并根据实际需求来设计 Schema 和 Resolver。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6509588795b1f8cacd4141cc