GraphQL 是一种查询语言，用于从服务端获取数据。它相对于传统 REST API 更加灵活和高效，具有更好的数据组织和查询能力。Fastify 是一个快速、高效、低开销的 Web 框架，适合构建高性能的 API 接口。本文将介绍如何在 Fastify 中集成 GraphQL，实现高效的 API 接口。
安装 Fastify 和 GraphQL
在开始之前，我们需要先安装 Fastify 和 GraphQL。可以使用 npm 或 yarn 进行安装：
npm install fastify fastify-gql graphql
或者
yarn add fastify fastify-gql graphql
初始化 Fastify 应用
首先，我们需要初始化一个 Fastify 应用。创建一个名为 app.js 的文件，并添加以下内容：
-- -------------------- ---- ------- ----- ------- - -------------------- ---------------- ----- --------- ------ -- - ------ - ------ ------- - -- -------------------- ----- -- - -- ----- - ------------------ --------------- - ------------------- ------- -- ------------------------ --展开代码
这段代码创建了一个 Fastify 应用，并监听在 http://localhost:3000/ 上。当访问该地址时，将返回一个 JSON 对象 { hello: 'world' }。
集成 GraphQL
接下来，我们需要使用 Fastify 插件 fastify-gql 将 GraphQL 集成到应用中。打开 app.js 文件，添加以下代码：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- --- - ---------------------- ----- - -------------------- - - ------------------------ ----- -------- - - ---- ----- - ------ ------- - - ----- --------- - - ------ - ------ -- -- ------- - - ----- ------ - ---------------------- --------- --------- -- --------------------- - ------- --------- ---- -- -------------------- ----- -- - -- ----- - ------------------ --------------- - ------------------- ------- -- ------------------------ --展开代码
这段代码：
- 使用
makeExecutableSchema函数定义了一个 GraphQL Schema。 - 使用 Fastify 插件
fastify-gql，将该 Schema 集成到 Fastify 应用中。 - 启用了 GraphiQL 工具，使得可以在浏览器中直接测试 GraphQL 查询。
现在，打开浏览器，访问 http://localhost:3000/graphql，就可以看到 GraphiQL 工具了。在左侧的编辑器中，输入以下查询语句：
{ hello }
然后点击右侧的 Play 按钮，可以看到返回的结果是：
{ "data": { "hello": "world" } }
这说明我们已经成功地在 Fastify 中集成了 GraphQL。
添加更多的查询
现在，我们只定义了一个简单的查询 hello。但是，GraphQL 的查询能力远不止于此。下面，我们将添加更多的查询，以便深入了解 GraphQL。
参数查询
添加一个查询 user，可以根据传入的 ID 返回一个用户对象。在 Schema 中添加以下内容：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ------ ------- - ---- ----- - ------ ------- -------- ----- ---- -展开代码
在 Resolver 中添加以下内容：
-- -------------------- ---- ------- ----- ----- - - - --- ---- ----- -------- ------ ------------------- -- - --- ---- ----- ------ ------ ----------------- - - ----- --------- - - ------ - ------ -- -- -------- ----- --- - -- -- -- --------------- -- ------- --- --- - -展开代码
现在，在 GraphiQL 工具中可以发送如下查询：
{ user(id: "1") { name email } }
返回的结果是：
{ "data": { "user": { "name": "Alice", "email": "alice@example.com" } } }
列表查询
添加一个查询 users，可以返回所有用户的列表。在 Schema 中添加以下内容：
type Query { hello: String! user(id: ID!): User users: [User] }
在 Resolver 中添加以下内容：
const resolvers = { Query: { hello: () => 'world', user: (_, { id }) => users.find(user => user.id === id), users: () => users } }
现在，在 GraphiQL 工具中可以发送如下查询：
{ users { name email } }
返回的结果是：
-- -------------------- ---- ------- - ------- - -------- - - ------- -------- -------- ------------------- -- - ------- ------ -------- ----------------- - - - -展开代码
变量查询
到目前为止，我们只使用了硬编码的参数。GraphQL 还提供了变量查询，可以使用变量传递参数。在 GraphiQL 工具中使用变量很方便。在编辑器左下角有一个变量区域，可以定义变量类型和默认值。然后在查询语句中使用 $ 符号引用变量。在实际应用中，我们可以使用各种语言的 GraphQL 客户端库来发送变量查询。在 Schema 中添加以下内容：
type Query { hello: String! user(id: ID!): User users: [User] findUsers(name: String!): [User] }
在 Resolver 中添加以下内容：
-- -------------------- ---- ------- ----- --------- - ------ -- ----------------- -- ------------------------- ----- --------- - - ------ - ------ -- -- -------- ----- --- - -- -- -- --------------- -- ------- --- ---- ------ -- -- ------ ---------- --- - ---- -- -- --------------- - -展开代码
现在，在 GraphiQL 工具中可以发送如下查询：
query findUsers($name: String!) { findUsers(name: $name) { name email } }
在变量区域输入以下变量：
{ "name": "B" }
返回的结果是：
-- -------------------- ---- ------- - ------- - ------------ - - ------- ------ -------- ----------------- - - - -展开代码
小结
在这篇文章中，我们介绍了如何在 Fastify 中集成 GraphQL，实现高效的 API 接口。我们从简单的查询开始，逐渐深入了解了 GraphQL 的各种查询功能。希望这篇文章能够帮助你更好地理解 GraphQL 和 Fastify，以及如何使用它们来构建高效的 API 接口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c94718e46428fe9e074939
