使用 Express.js 和 GraphQL 实现 API 接口的教程

近年来，前端开发技术的发展日新月异，前端工程师不但需要掌握多种前端框架，还需要熟练掌握后端技术。本文将为你介绍使用 Express.js 和 GraphQL 实现 API 接口的教程，希望可以帮助你提高你的技术能力。

什么是 Express.js？

Express.js 是一个流行的 Node.js web 框架，用于构建网站和 web 应用程序。它提供了一个简洁、灵活和可扩展的 API，使开发人员可以轻松地构建复杂的 web 应用程序。

什么是 GraphQL？

GraphQL 是一种用于 API 构建的查询语言。它使开发人员可以定义客户端请求的数据的结构，而不是在服务端上构建预定义的端点。GraphQL 运行在服务端上，并处理由客户端发起的查询请求。

如何在 Express.js 中使用 GraphQL？

首先，我们需要安装 graphql 和 express-graphql 两个包。在终端或命令行窗口中，输入以下命令进行安装：

npm install --save graphql express-graphql

安装完成后，我们可以在代码中引入这两个包：

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

接下来，我们需要定义我们的数据模式和可以查询的字段。在这个示例中，我们将使用创建一个简单的数据模式和一个查询，用于从数据库中检索用户信息。

const schema = buildSchema(`
  type Query {
    user(id: Int!): User
    users: [User]
  }

  type User {
    id: Int
    name: String
    email: String
  }
`);

const usersData = [
  {id: 1, name: 'John', email: 'john@example.com'},
  {id: 2, name: 'Jane', email: 'jane@example.com'},
  {id: 3, name: 'Bob', email: 'bob@example.com'}
];

const root = {
  user: (args) => {
    const { id } = args;
    return usersData.find(user => user.id === id);
  },
  users: () => {
    return usersData;
  },
};

在这个示例中，我们定义了一个查询类型和一个用户类型。查询类型包含一个用户查询和一个用户集合查询。用户类型包含三个字段，id、name 和 email。我们还定义了一个函数 usersData 来存储和检索用户数据。

最后，我们将需要在 Express app 中创建一个路由，将 GraphQL 中间件绑定到该路由，然后启动服务器。下面是示例代码：

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

在这个示例中，我们将 GraphQL 中间件绑定到 /graphql 路由上，设置了数据模式，将根查询对象设置为 root，并启用了 GraphiQL。GraphiQL 是一个用于测试和调试 GraphQL 查询的交互式 IDE。

现在，我们可以访问网站，以查询指定 ID 的用户或所有用户。下面是一些查询的示例：

http://localhost:3000/graphql?query={user(id:1){name}}
http://localhost:3000/graphql?query={users{id,name,email}}

这些查询将返回以下结果：

{
  "data": {
    "user": {
      "name": "John"
    }
  }
}

{
  "data": {
    "users": [
      {
        "id": 1,
        "name": "John",
        "email": "john@example.com"
      },
      {
        "id": 2,
        "name": "Jane",
        "email": "jane@example.com"
      },
      {
        "id": 3,
        "name": "Bob",
        "email": "bob@example.com"
      }
    ]
  }
}

总结

在本文中，我们介绍了如何使用 Express.js 和 GraphQL 实现 API 接口的教程。通过本文的示例代码，你可以了解到如何定义 GraphQL 的数据模式，如何查询数据，并将 GraphQL 中间件绑定到 Express app 中。这个教程给你提供了一个良好的起点，你可以通过探索更多的 GraphQL 功能来扩展和定制你的 API 接口。

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