在网页应用中添加 GraphQL 路由-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，可替代 REST API，并据此构建服务器端。它具有类型系统、查询语言、解析器等诸多特性，能够更方便地进行数据查询和操作。在前端方面，我们可以利用 GraphQL 路由来实现更优雅的数据请求和处理。

本文将介绍如何在网页应用中添加 GraphQL 路由。它将涵盖以下四个方面：

什么是 GraphQL 路由
设置 GraphQL 服务器
图形化请求与应答
代码示例

什么是 GraphQL 路由

GraphQL 路由是一种将 GraphQL API 作为 RESTful API 之一的方式。之所以称之为路由，是因为我们可以使用不同的路径（或端点）来进行不同的查询操作。

接口路径通常是由表达式和变量组成的。例如，我们可以在 URL 中使用一个 ?query= 参数，将查询当前用户信息的 GraphQL 查询字符串添加到 URL 中。

设置 GraphQL 服务器

安装依赖项

使用 GraphQL，首先需要进行安装。其中用于构建 GraphQL API 的库分别是 graphql 和 express-graphql。我们可以使用以下 npm 命令来安装它们：

npm install graphql express graphql-express

导入依赖项

在设置 GraphQL 服务器之前，需要导入以下依赖项：

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

创建 schema

接下来，需要创建 schema。它是一种描述如何组织和操作数据的方式。我们可以使用 GraphQL 的静态类型系统来定义一个 schema。以下是一个简单的 schema 示例：

// www.javascriptcn.com code example
const schema = buildSchema(`
  type Query {
    user(id: Int!): User
    users: [User]
  },
  type User {
    id: Int
    name: String
  }
`);

在上述代码中，我们定义了一个 Query 类型，它包含了两个字段：user 和 users。user 字段具有参数 id，它将返回类型为 User 的对象。users 返回一个由 User 类型组成的数组。

解析器

接下来，我们需要创建与 schema 相对应的解析器。这些解析器在查询时将被调用。我们可以使用以下代码来创建解析器：

// www.javascriptcn.com code example
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

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

在上述代码中，我们定义了一个 root 对象，该对象包含解析器函数，它们用于执行 GraphQL 操作。在本例中，我们创建了两个解析器函数 user 和 users。

创建服务器

最后，我们需要创建 GraphQL 服务器。以下是一个简单的服务器示例：

// www.javascriptcn.com code example
const app = express();

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

app.listen(5000, () => {
  console.log('GraphQL server is listening on port 5000');
});

在上述代码中，我们创建一个 express 应用程序，并将其与 GraphQL 中间件连接。schema 变量用于指定我们的 schema。rootValue 变量用于指定与 schema 相对应的解析器。graphiql 标志用于启用图形化请求与应答界面。

图形化请求与应答

在设置 GraphQL 服务器之后，我们可以使用图形化请求与应答接口测试和分析我们的 GraphQL API。

默认情况下，express-graphql 库提供了一个网页图形化请求与应答插件，它可以在 /graphql 路径上访问。我们只需要将 graphiql 变量设置为 true 即可启用它。

通过图形化请求与应答，我们可以轻松试验无样式的查询、获取类型定义信息并开展演练。

代码示例

以下是完整的实现 GraphQL 路由的示例代码：

// www.javascriptcn.com code example
const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

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

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

const app = express();

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

app.listen(5000, () => {
  console.log('GraphQL server is listening on port 5000');
});

在上述代码中，我们创建了一个简单的用户列表，它包含两个字段：id 和 name。我们通过创建一个类型为 User 的 GraphQL schema 来描述用户列表的结构。同时，使用 buildSchema() 构建 schema 对象。

接下来，我们创建了两个查询解析器函数 user 和 users。解析器函数用于查询一个特定的用户或返回所有的用户。单个用户查询需要用户 id 作为参数。

最后，我们创建了一个 express 应用程序，并将其与 GraphQL 中间件连接。该中间件用于定义 GraphQL schema 和解析器，以及启用图形化请求与应答接口。

欢迎各位开发者和爱好者尝试本示例代码，并体验 GraphQL API 的优雅和高效。

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

在网页应用中添加 GraphQL 路由