GraphQL 是一种用于 API 开发的查询语言,它能够帮助前端开发人员在客户端上更加高效地查询和使用后端数据。而 Fastify 是一个高效的 Web 应用程序框架,其号称是最快的 Node.js 框架之一。结合 Fastify 和 GraphQL 可以实现高效的数据查询服务。
前置知识
在开始学习 Fastify 和 GraphQL 结合创建数据查询服务之前,您需要掌握以下前置技术:
- Node.js 和 JavaScript 的基础知识
- GraphQL 的基础知识
- Fastify 的基础知识
安装依赖
在开始使用 Fastify 和 GraphQL,我们需要安装所需的依赖。我们需要安装以下依赖:
npm install fastify fastify-cors graphql graphql-tools
- Fastify 是一个高效的 Node.js Web 应用程序框架。
- Fastify-cors 是 Fastify 的一个插件,它允许我们访问跨域资源。
- GraphQL 是一个强大的查询语言,它可以帮助我们高效地查询和使用后端数据。
- GraphQL-tools 是一个用于创建和操作 GraphQL schema 的工具包。
创建服务器
接下来我们将用 Fastify 创建一个简单的服务器,以下是代码:
const fastify = require('fastify')() fastify.listen(3000, err => { if (err) throw err console.log(`server listening on ${fastify.server.address().port}`) })
创建 GraphQL schema
在创建 GraphQL schema 之前,我们需要定义一个数据源。以下是一个简单的数组,其中包含三个电影对象:
const movies = [ { id: 1, title: 'Pulp Fiction', genre: 'Crime', year: 1994 }, { id: 2, title: 'The Godfather', genre: 'Crime', year: 1972 }, { id: 3, title: 'Titanic', genre: 'Romance', year: 1997 } ]
接下来定义 GraphQL schema,这里我们将定义一个查询类型,该类型将包含一个名为movies
的字段,用于获取电影数据。以下是代码:
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------ ----- -------- - - ---- ----- - --- --- ------ ------ ------ ------ ----- --- - ---- ----- - ------- ------- - - ----- --------- - - ------ - ------- ----- -- -- - ------ ------ - - - ----- ------ - ---------------------- --------- --------- --
在这里我们使用了 graphql-tools
模块来创建 GraphQL schema,我们定义了一个名为 Movie
的类型,该类型包含了电影的一些属性。我们还定义了名为 Query
的类型,它有一个名为 movies
的字段,该字段返回 Movie
类型的数组。最后我们将类型定义和解析器合并成一个 schema 实例,并将其导出,以便我们可以使用它来处理 GraphQL 查询。
在服务器上注册 GraphQL 插件
我们已经创建了用于查询数据的 GraphQL schema,接下来我们需要将其注册到 Fastify 服务器中。下面是代码:
-- -------------------- ---- ------- ----- - --------------- --------------- - - -------------------------- -------------------------------- - ------- ----------- ------ -- --------------------------------- - ------- ------------ --------- ----- ------------ ---------- --
我们在 Fastify 服务器上注册 graphqlFastify
和 graphiqlFastify
插件,前者用于处理 GraphQL 查询,后者用于提供 GraphiQL
界面以方便测试和查询。接下来,我们将 schema
实例注册到 graphqlFastify
插件中,并设置了默认的路由前缀为 /graphql
。最后,我们将 graphiqlFastify
插件注册到服务器中,并将其路由前缀设置为 /graphiql
。
测试服务
现在我们已经完成了 Fastify 和 GraphQL 结合创建数据查询服务的所有步骤。我们可以使用以下命令来启动服务器:
node index.js
如果一切正常,您应该看到以下输出信息:server listening on 3000
现在您可以在浏览器中访问 http://localhost:3000/graphiql
来测试 GraphiQL 界面。在右侧查询窗格中输入以下查询,您将获得电影列表:
query { movies { id title genre year } }
响应应如下所示:
-- -------------------- ---- ------- - ------- - --------- - ------ -- -------- ----- --------- -------- -------- ------- ------ ------ -- -------- ---- ----------- -------- -------- ------- ------ ------ -- -------- ---------- -------- ---------- ------- ----- - - -
总结
在本文中,我们学习了如何使用 Fastify 和 GraphQL 创建数据查询服务,我们了解了基本的 Fastify 和 GraphQL 概念和用法,并使用示例代码展示了整个流程。希望本文对您有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64e8d757f6b2d6eab345301c