如何使用 Apollo Server 和 GraphQL 创建全功能后端服务-JavaScript中文网-JavaScript教程资源分享门户

如果你是一个前端开发者，你可能已经听说过 GraphQL 和 Apollo Server。GraphQL 是一个用于 API 的查询语言，它由 Facebook 在 2012 年创建。最近几年，它已经成为了前端开发者的热门选择，因为它可以帮助开发者构建更灵活、易于维护的 API。而 Apollo Server 则是一个用于构建 GraphQL 服务器的开发包，它提供了很多有用的工具和功能，可以帮助我们快速创建 GraphQL 服务。

在这篇文章中，我将向你介绍如何使用 Apollo Server 和 GraphQL 创建一个全功能的后端服务。你将学习到如何设置 Apollo Server、定义 GraphQL 模式、编写解析器和编写查询。我们将创建一个示例后端服务，它将处理一个简单的 todo 应用程序，允许用户创建、更新、删除和获取todo列表。

准备工作

在开始之前，你需要安装以下软件：

Node.js
npm 或 yarn

接下来，创建一个新的 Node.js 项目，并在项目根目录下运行以下命令来安装 Apollo Server 和其他依赖：

npm install apollo-server graphql

或者使用 yarn：

yarn add apollo-server graphql

配置 Apollo Server

配置 Apollo Server 的第一步是导入必要的模块。在项目的入口文件中，添加以下代码：

const { ApolloServer, gql } = require('apollo-server');

这里我们导入了 ApolloServer 和 gql，前者是用于创建一个 GraphQL 服务器实例，后者是用于定义 GraphQL 模式的函数。

接下来，我们需要定义一个 Schema，Schema 定义了查询和类型的结构。我们将创建以下类型：

// javascriptcn.com 代码示例
type Todo {
  id: ID!
  text: String!
  completed: Boolean!
}

type Query {
  todos: [Todo!]!
}

type Mutation {
  addTodo(text: String!): Todo!
  updateTodo(id: ID!, text: String, completed: Boolean): Todo
  deleteTodo(id: ID!): ID!
}

这里我们定义了 Todo 类型，它拥有三个字段：id、text 和 completed。我们还定义了 Query 和 Mutation，它们分别代表查询和变更。Query 中有一个叫做 todos 的字段，它将返回一个 Todo 类型的数组。Mutation 中有三个字段：addTodo、updateTodo 和 deleteTodo，这些字段将分别允许用户创建、更新和删除 todo。

我们可以使用 gql 函数来定义这个模式。在入口文件中，添加以下代码：

// javascriptcn.com 代码示例
const typeDefs = gql`
  type Todo {
    id: ID!
    text: String!
    completed: Boolean!
  }

  type Query {
    todos: [Todo!]!
  }

  type Mutation {
    addTodo(text: String!): Todo!
    updateTodo(id: ID!, text: String, completed: Boolean): Todo
    deleteTodo(id: ID!): ID!
  }
`;

接下来，我们需要设置 resolvers。Resolver 是一个用于解析 GraphQL 查询的函数。我们将编写四个解析器，分别用于 Query 中的 todos，以及 Mutation 中的 addTodo、updateTodo 和 deleteTodo。

在入口文件中，添加以下代码：

// javascriptcn.com 代码示例
const todos = [];

const resolvers = {
  Query: {
    todos: () => todos,
  },
  Mutation: {
    addTodo: (parent, args) => {
      const newTodo = {
        id: todos.length + 1,
        text: args.text,
        completed: false,
      };
      todos.push(newTodo);
      return newTodo;
    },
    updateTodo: (parent, args) => {
      const todo = todos.find((todo) => todo.id === parseInt(args.id));
      if (!todo) {
        throw new Error(`Todo with id ${args.id} not found`);
      }
      if (args.text) {
        todo.text = args.text;
      }
      if (args.completed !== undefined) {
        todo.completed = args.completed;
      }
      return todo;
    },
    deleteTodo: (parent, args) => {
      const index = todos.findIndex((todo) => todo.id === parseInt(args.id));
      if (index === -1) {
        throw new Error(`Todo with id ${args.id} not found`);
      }
      const deleted = todos.splice(index, 1);
      return deleted[0].id;
    },
  },
};

这里我们创建了一个名为 todos 的空数组，它用于存储 todo 列表。然后，我们定义了 resolvers 对象，它包含了 Query 和 Mutation 的解析器。在 Query 中，我们返回了 todos 数组。在 Mutation 中，我们编写了三个解析器。addTodo 将创建一个新的 todo，并将其添加到 todos 中。updateTodo 将查找具有给定 id 的 todo，并更新 text 和/或 completed 字段。deleteTodo 将查找具有给定 id 的 todo，并将其从 todos 中删除。

最后一步是创建 Apollo Server 实例。在入口文件中，添加以下代码：

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

这里我们创建了一个 ApolloServer 实例，并将 typeDefs 和 resolvers 对象传递给了它。现在，我们已经创建了一个完整的 GraphQL 服务器，可以准备启动它。

启动服务器

启动服务器非常简单。在入口文件中，添加以下代码：

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

这个函数将自动为我们选择一个空闲端口，并在上面启动我们的服务器。现在，我们可以使用 GraphQL Playground 来测试我们的服务了。

打开浏览器，并输入以下地址：

http://localhost:4000/

你应该会看到一个看起来像这样的界面：

这个界面就是 GraphQL Playground，它是一个用于测试 GraphQL 服务的工具。如果一切正常，你应该可以在 Playground 中看到我们定义的类型和查询。

编写查询

现在，我们已经可以测试我们的 GraphQL 服务了。尝试向 addTodo 发送一个变更请求：

// javascriptcn.com 代码示例
mutation {
  addTodo(
    text: "Buy milk"
  ) {
    id
    text
    completed
  }
}

你应该会得到一个响应，其中包含了一个新的 todo：

// javascriptcn.com 代码示例
{
  "data": {
    "addTodo": {
      "id": "1",
      "text": "Buy milk",
      "completed": false
    }
  }
}

然后，尝试向 todos 字段发送一个查询请求：

query {
  todos {
    id
    text
    completed
  }
}

你应该会看到我们上面创建的那个 todo：

// javascriptcn.com 代码示例
{
  "data": {
    "todos": [
      {
        "id": "1",
        "text": "Buy milk",
        "completed": false
      }
    ]
  }
}

我们还可以向 updateTodo 发送一个变更请求：

// javascriptcn.com 代码示例
mutation {
  updateTodo(
    id: 1,
    text: "Buy bread",
    completed: true
  ) {
    id
    text
    completed
  }
}

这将更新 id 为 1 的 todo。最后，我们尝试向 deleteTodo 发送一个变更请求：

mutation {
  deleteTodo(
    id: 1
  )
}

这将删除 id 为 1 的 todo。

总结

恭喜！你已经成功地创建了一个 GraphQL 服务器，并且使用 Apollo Server 和 GraphQL 实现了一个简单的 todo 应用程序的后端服务。虽然这只是一个简单的示例，但这可以帮助你更好地理解如何使用 Apollo Server 和 GraphQL 创建全功能的后端服务。

现在，你可以使用这个基础来创建自己的后端服务，并为它添加更多功能和解析器！

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