如何在 RESTful API 中使用 GraphQL-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是当前非常流行的一种 API 查询语言，它的优势在于可以根据需要精确查询所需的数据，并支持即时调整查询内容。在使用 RESTful API 进行前端开发中，我们可以将 GraphQL 与 RESTful API 结合使用，发挥 GraphQL 的优势。接下来，本文将详细介绍如何在 RESTful API 中使用 GraphQL。

了解 GraphQL

在深入探讨 GraphQL 如何在 RESTful API 中使用之前，我们首先需要了解 GraphQL。

GraphQL 是一种 API 查询语言，可以用来定义 API 数据结构和查询方式。GraphQL 具有以下优点：

在 GraphQL 中进行查询可以避免过度或不足的数据获取，因此可以提高 API 的性能。
GraphQL 通过类型系统提供了强大的自动文档功能，方便了开发者的理解。
GraphQL 支持客户端决定查询内容，减轻了 API 负担，并且可以提高查询的效率。
GraphQL 通过自定义标签和查询参数，提供了更好的查询语义表述。

虽然 GraphQL 有很多优点，但它也有它的不足，首先它需要编写自己的 API 服务器；其次相比于 RESTful API 实现回调的形式，相当于部分静态化动态了。

开始使用 GraphQL

在掌握 GraphQL 基础知识之后，我们可以开始考虑如何在 RESTful API 中使用 GraphQL。

首先，我们需要在后端实现一个 GraphQL 服务器。实现 GraphQL 服务器的方式有很多种，比较常见的有编写代码和使用 GraphQL 服务提供商。在代码里，可以通过类似 Express、Koa、Java Spring 等常见的后端框架来实现 GraphQL 服务器，用 GraphQL 服务提供商可以使用腾讯云、阿里云等提供的基于 GraphQL 的服务。

其次，我们需要在前端应用程序中使用 GraphQL 客户端来查询 GraphQL 服务器。GraphQL 客户端通常由数据查询（query）、数据变更（mutation）以及订阅（subscription）三个部分组成。在绝大多数情况下，我们使用 GraphQL 客户端可以轻松地查询 GraphQL 服务器的数据，不需要了解服务器的具体实现细节。

当然，RESTful API 已经存在的情况下使用 GraphQL，我们也可以通过一些工具或中间件实现。比如，使用 Apollo Server 可以将一个已有的 RESTful API 转变为 GraphQL API。通过这种方式，我们可以让 RESTful API 兼容 GraphQL，从而方便地使用 GraphQL 从 RESTful API 中查询数据。

下面，我们以示例代码的形式演示如何在 RESTful API 中使用 GraphQL：

// javascriptcn.com 代码示例
// server.js
const { ApolloServer } = require('apollo-server');
const { RESTDataSource } = require('apollo-datasource-rest');
const { gql } = require('apollo-server');

class TodosAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://jsonplaceholder.typicode.com/';
  }

  async getAllTodos() {
    return this.get(`/todos`);
  }

  async getTodoById({ id }) {
    return this.get(`/todos/${id}`);
  }

  async createUser({ user }) {
    return this.post('/users', user);
  }

  async updateUser({ id, user }) {
    return this.put(`/users/${id}`, user);
  }

  async deleteUser({ id }) {
    return this.delete(`/users/${id}`);
  }

  async createTodo({ todo }) {
    return this.post('/todos', todo);
  }

  async updateTodo({ id, todo }) {
    return this.put(`/todos/${id}`, todo);
  }

  async deleteTodo({ id }) {
    return this.delete(`/todos/${id}`);
  }
}

const typeDefs = gql`
  type Query {
    todos: [Todo!]!
    todoById(id: ID!): Todo
  }

  type Todo {
    id: ID!
    title: String!
    completed: Boolean!
  }
`;

const resolvers = {
  Query: {
    todos: async (parent, args, { dataSources }) => dataSources.todosAPI.getAllTodos(),
    todoById: async (parent, { id }, { dataSources }) => dataSources.todosAPI.getTodoById({ id }),
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  dataSources: () => ({
    todosAPI: new TodosAPI(),
  }),
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

在上述示例代码中，首先我们引入了 Apollo Server、apollo-datasource-rest 以及 gql 等插件和库。然后，我们编写了一个 TodosAPI 类来继承 RESTDataSource 类，从而可以调用已有的 RESTful API。在 gql 中声明了 Query 类型，用来查询 API 中的 todo 数据。然后，我们在 resolver 中实现了对 todo 数据的具体查询操作。最后，我们将 typeDefs、resolvers 以及数据源注入到 ApolloServer 的实例对象中，并启动了一个服务。

总结

在本文中，我们简单了解了 GraphQL，并示例代码的形式展示了如何在 RESTful API 中使用 GraphQL。通过上述代码，我们可以在使用 RESTful API 实现的情况下，方便地使用 GraphQL 查询数据，在一定程度上提高了开发效率和查询性能。当然，GraphQL 在使用时还有很多细节需要注意，需要开发者不断实践和总结。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e4bef7d4982a6ebf5712a