利用 Fastify 框架构建 GraphQL 服务器的完整教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 Fastify

Fastify 是 Node.js 的一个高性能 Web 框架，采用了一些优秀的设计思想和实践，旨在提供最佳的性能和开发体验。它的特点包括：

极快的请求处理速度，常常是 Express 的两倍以上
低内存消耗，对于大量并发的场景非常适用
支持插件化的设计，方便扩展和定制
严格的类型声明和静态类型检查机制
灵活的中间件机制和请求生命周期管理

什么是 GraphQL

GraphQL 是一种用于 API 的查询语言，旨在提供更加高效、强大和灵活的数据获取方式。它的特点包括：

客户端可自定义请求的数据格式和结构，避免了传统 API 的过度查询、过度响应、过度传输等问题
支持多种复杂数据类型和关系的查询和联接，方便前端进行数据聚合和展示
可以通过接口定义和查询分析工具来优化查询性能和资源利用

Fastify + GraphQL 的好处

结合 Fastify 和 GraphQL，可以得到一个高性能、灵活和易用的 Web 服务器，适用于各种类型的前端开发需求。其中，Fastify 提供了快速和稳定的请求处理机制和插件扩展机制，GraphQL 提供了强大和灵活的数据查询和展示机制。

使用 Fastify + GraphQL 可以带来以下好处：

快速响应和高效传输，减少用户等待时间和网络资源消耗
灵活的客户端选择请求数据的方式，避免响应过度和冗余的数据
提供复杂的数据类型和关系查询和聚合，便于前端进行高级展示和多源数据处理

如何构建 Fastify + GraphQL 服务器

下面是构建 Fastify + GraphQL 服务器的详细步骤和示例代码：

步骤一：初始化项目

首先，我们需要创建一个新的 Node.js 项目并初始化它，这里使用 yarn 作为包管理工具，你也可以用 npm 完成相同的任务。以下是创建和初始化项目的命令：

mkdir fastify-graphql-server
cd fastify-graphql-server
yarn init -y
yarn add fastify graphql fastify-gql

其中，fastify-gql 是官方提供的 Fastify GraphQL 插件，可以帮我们快速创建一个 GraphQL 服务器。

步骤二：编写 GraphQL 查询解析器

在项目的根目录下，创建一个名为 schema.js 的文件，并编写我们的 GraphQL 查询解析器：

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type User {
    id: Int!
    name: String!
    email: String!
  }

  type Query {
    getUser(userId: Int!): User!
    getUsers: [User!]!
  }

  type Mutation {
    createUser(name: String!, email: String!): User!
    updateUser(id: Int!, name: String!, email: String!): User!
    deleteUser(id: Int!): User!
  }
`);

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' },
];

const resolvers = {
  Query: {
    getUser: ({ userId }) => users.find(u => u.id === userId),
    getUsers: () => users,
  },
  Mutation: {
    createUser: ({ name, email }) => {
      const id = users.length + 1;
      const user = { id, name, email };
      users.push(user);
      return user;
    },
    updateUser: ({ id, ...rest }) => {
      const index = users.findIndex(u => u.id === id);
      const user = { ...users[index], ...rest };
      users.splice(index, 1, user);
      return user;
    },
    deleteUser: ({ id }) => {
      const index = users.findIndex(u => u.id === id);
      const user = users[index];
      users.splice(index, 1);
      return user;
    },
  },
};

module.exports = {
  schema,
  resolvers,
};

在这个文件中，我们首先定义了我们的数据模型和查询类型，然后在 resolvers 对象中定义了具体的查询和变更逻辑。在本例中，我们定义了三种查询和三种变更操作，分别用于获取和操作用户数据。

注意，这里我们并没有连接任何数据库或其他存储方式，而是直接使用硬编码的方式来存储和处理数据。这样做的原因是为了让我们专注于 GraphQL 的实现和使用，并在后续章节中演示真实数据源的连接。

步骤三：创建 Fastify 应用

在项目的根目录下，创建一个名为 app.js 的文件，并编写我们的 Fastify 应用代码：

const fastify = require('fastify')();
const gql = require('fastify-gql');
const { schema, resolvers } = require('./schema');

fastify.register(gql, {
  schema,
  resolvers,
});

fastify.get('/', async (req, res) => {
  return { server: 'fastify', status: 'ok' };
});

fastify.listen(3000, err => {
  if (err) {
    fastify.log.error(err);
    process.exit(1);
  }
  console.log('Server is listening on http://localhost:3000');
});

在这个文件中，我们首先引入 fastify 和 fastify-gql，然后使用 fastify.register 方法注册 fastify-gql 插件，并分别传入 schema 和 resolvers 对象。这样，我们就可以使用 GraphQL 查询语言查询和变更服务器端的数据了。

然后我们再创建了一个 get 请求处理逻辑，仅仅返回一些服务器状态信息，这是为了方便我们在启动服务器后检查是否正常工作。

最后使用 fastify.listen 方法监听 3000 端口并启动服务器。

步骤四：测试 GraphQL 查询

现在我们可以启动服务器并测试一下 GraphQL 查询是否正常工作。在启动服务器后，打开浏览器，输入 http://localhost:3000/graphql，你会看到 GraphQL Playground 的页面：

在这个页面中，我们可以编写我们的 GraphQL 查询和变更操作。首先测试一下查询操作：

query {
  getUsers {
    id
    name
    email
  }
}

这个查询操作可以获取所有用户的列表，返回如下结果：

{
  "data": {
    "getUsers": [
      {
        "id": 1,
        "name": "Alice",
        "email": "alice@example.com"
      },
      {
        "id": 2,
        "name": "Bob",
        "email": "bob@example.com"
      },
      {
        "id": 3,
        "name": "Charlie",
        "email": "charlie@example.com"
      }
    ]
  }
}

接下来测试一下变更操作：

mutation {
  createUser(name: "David", email: "david@example.com") {
    id
    name
    email
  }
}

这个变更操作可以创建一个新的用户，并返回该用户的信息，返回如下结果：

{
  "data": {
    "createUser": {
      "id": 4,
      "name": "David",
      "email": "david@example.com"
    }
  }
}

测试一下更新操作：

mutation {
  updateUser(id: 4, name: "Emily") {
    id
    name
    email
  }
}

这个变更操作可以更新已有的用户信息，并返回更新后的用户信息，返回如下结果：

{
  "data": {
    "updateUser": {
      "id": 4,
      "name": "Emily",
      "email": "david@example.com"
    }
  }
}

测试一下删除操作：

mutation {
  deleteUser(id: 4) {
    id
    name
    email
  }
}

这个变更操作可以删除已有的用户信息，并返回被删除的用户信息，返回如下结果：

{
  "data": {
    "deleteUser": {
      "id": 4,
      "name": "Emily",
      "email": "david@example.com"
    }
  }
}

至此，我们已经成功地创建了一个 Fastify + GraphQL 的服务器，并成功进行了一些测试和调试，你可以根据自己的需要和实际需求进一步改进和拓展它。

总结

Fastify + GraphQL 是一个高效、灵活和易用的 Web 服务器技术栈，它能够帮我们处理各种类型的请求和查询，并提供高性能、灵活和易用的数据访问接口。利用 Fastify + GraphQL，我们可以加速我们的前端开发流程，并提供更好的用户体验和体感。在这篇文章中，我们详细介绍了如何构建 Fastify + GraphQL 服务器，并提供了示例代码和测试步骤，请读者根据自己的需要和实际需求进一步学习和实践。

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