如何将 GraphQL API 添加到现有的 Express 应用程序中-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种新型的 API 查询语言，它能够提供更加灵活和高效的数据查询和操作方式。在现代 Web 应用程序中，使用 GraphQL API 已经成为了越来越流行的选择。本文将介绍如何将 GraphQL API 添加到现有的 Express 应用程序中，并提供详细的学习和指导意义。

准备工作

在开始之前，需要确保已经安装了以下软件：

Node.js
Express
GraphQL

如果还没有安装，可以通过以下命令进行安装：

# 安装 Node.js
sudo apt-get install nodejs

# 安装 Express
npm install express

# 安装 GraphQL
npm install graphql

创建 GraphQL Schema

在添加 GraphQL API 之前，需要先创建一个 GraphQL Schema。Schema 是一种定义 GraphQL API 查询和操作的方式。以下是一个简单的 Schema 示例：

// javascriptcn.com 代码示例
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

module.exports = schema;

这个 Schema 定义了一个名为 hello 的查询，返回一个字符串类型的结果。

创建 Express 应用程序

接下来，需要创建一个 Express 应用程序并将 GraphQL API 集成进去。以下是一个简单的 Express 应用程序示例：

// javascriptcn.com 代码示例
const express = require('express');
const graphqlHTTP = require('express-graphql');
const schema = require('./schema');

const app = express();

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

app.listen(4000, () => {
  console.log('GraphQL API Server is running on http://localhost:4000/graphql');
});

这个应用程序将 GraphQL API 暴露在 /graphql 路径上，并启用了 GraphiQL 工具，可以在浏览器中方便地测试 GraphQL API。

添加 Resolvers

现在，需要添加 Resolvers 来实现对 GraphQL 查询的处理。Resolvers 是一种将 GraphQL 查询映射到实际数据的方式。以下是一个简单的 Resolver 示例：

const resolvers = {
  hello: () => {
    return 'Hello World!';
  },
};

module.exports = resolvers;

这个 Resolver 实现了 hello 查询，并返回了一个字符串类型的结果。

将 Resolvers 添加到 Schema 中

最后，需要将 Resolvers 添加到 Schema 中。以下是一个简单的代码示例：

// javascriptcn.com 代码示例
const { makeExecutableSchema } = require('graphql-tools');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

module.exports = schema;

这个代码将 Resolvers 添加到了之前创建的 Schema 中，并将其导出。

测试 GraphQL API

现在，可以通过浏览器访问 http://localhost:4000/graphql 来测试 GraphQL API。在 GraphiQL 工具中，输入以下查询：

{
  hello
}

运行查询后，应该会得到以下结果：

{
  "data": {
    "hello": "Hello World!"
  }
}

总结

在本文中，我们学习了如何将 GraphQL API 添加到现有的 Express 应用程序中。我们创建了一个简单的 Schema 和 Resolver，并将其添加到了 Express 应用程序中。最后，我们通过浏览器测试了 GraphQL API，成功得到了查询结果。希望本文能够对你理解 GraphQL API 的实现方式有所帮助。

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