GraphQL 是一种API查询语言，用于查询和操作大量数据。在前端开发的过程中，我们经常使用GraphQL去获取服务器数据，并渲染到页面上。在Koa2中使用GraphQL的过程需要详细的步骤和学习，在本篇文章中，我们将详细介绍如何在Koa2中使用GraphQL实现数据查询。
安装依赖
首先，为了在Koa2中使用GraphQL，我们需要安装两个必需的节点包：
npm install koa @koa/router koa-bodyparser graphql apollo-server-koa --save
这里值得注意的是，我们通过包管理器安装的GraphQL需要在Koa2的应用程序中调用。
创建graphqlSchema
接下来，我们将创建一个GraphQL模式文件 graphqlSchema.js，这个文件将承载所有GraphQL查询和模板的模型。
-- -------------------- ---- ------- ----- - --- - - ----------------------------- ----- -------- - ---- ---- ----- - ---------- ----- ------ ------------- ----- ------ ------ ---------- - ---- ------ - --- --- ------ ------- ------------ ------- -------- ------- ------ ------- ---- ------- ---------- ------- ------- ------ ------------ ------ - -- -------------- - ---------展开代码
这里，我们定义了两个查询，一个用于获取单个课程，另一个用于获取所有课程。然后，我们定义了一个名为“课程”的GraphQL类型和它的所有属性。
创建mock数据
我们创建一个MOCK数据文件 mockData.js，包含课程详细信息并传递给GraphQL。
-- -------------------- ---- ------- ----- -------- - - - --- -- ------ ---- ------------- ------------ ------ --- ----------- ---- --------- -------- ----- ----- ------ ----------- ---- ---------------------- ---------- ------------------------------------------------------------ ------- ---- ------------ --- -- - --- -- ------ ------- ------------- ------------ ------ ------ ----------- ---- --------- -------- ----- ----- ------ --------------- ---- ---------------------- ---------- --------------------------------------------------------------- ------- ---- ------------ -- -- - --- -- ------ ----- ------------- ------------ ------ ---- ----------- ---- --------- -------- ---- ------- ------ ----------- ---- ---------------------- ---------- ------------------------------------------------------------- ------- ---- ------------ -- -- -- -------------- - ---------展开代码
创建数据源
为了将我们的MOCK数据传递给GraphQL查询，我们将创建一个数据源文件dataSource.js。
-- -------------------- ---- ------- ----- -------- - ---------------------- ----- ---------- - ------ ----- ----------------- - ----- ------ - ---------------------- -- --------- --- -------------- ------ ------- - ------ ----- ---------------------- - ----- --------------------- ----- --- - ------------ ----- ------- - -------------------------- ------ -------- - - -------------- - -----------展开代码
这里，我们创建一个用于获取单个课程id和一个用于获取多个课程的getCourseById方法。我们利用find方法和slice方法对MOCK数据进行数据筛选和翻页操作。
创建resolvers解析程序
我们将创建一个文件 resolvers.js，它将承载所有GraphQL选择器和解决程序的方法。这个文件可以将我们的数据源、数据模型与GraphQL查询连接起来。
-- -------------------- ---- ------- ----- ---------- - ------------------------ ----- --------------- - - ------ - ----- --------- - -- -- - ----- ------ - ----- ----------------------------- ------ ------- -- ----- ---------- - ----- ----- -- - ----- ------- - ----- ---------------------------------- ------ -------- -- -- -- -------------- - ----------------展开代码
这里，我们通过GraphQL选择器将数据源与数据模型连接在一起，从而连接查询和实际数据源。 我们编写这些解决程序函数，用于通过GraphQLID和分页参数从dataSource.js中获取数据。
创建Koa2应用程序
接下来，我们将创建Koa2应用程序，并连接GraphQL模式和解析程序。
-- -------------------- ---- ------- ----- --- - --------------- ----- ------ - ----------------------- ----- - ----------- ----------- - - ----------------------------- ----- -------- - --------------------------- ----- --------- - ----------------------- ----- --- - --- ------ ----- ------ - --- --------- ----------------------- ------------ ------- --------- ---------- --------- ---- ----------- ------------ ------------- ------------ ----------- -- -- ------------------------- --------------------------------- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ----- ---------- ---展开代码
这里，我们创建了一个包含两个路由的Koa2服务器，一个用于graphql查询，另一个用于graphql视图模式。 我们将模式和解析程序传递给graphqlKoa()函数，并将节点路由替换为Koa2的路由。
我们使用常规路由支持，并将适当的URI链接到功能。最后，我们启动了服务器并监听端口。
测试
现在的GraphQL服务已经准备好，通过使用POST的Graphiql查询，你可以对服务进行测试。
测试查询：获取特定课程详情，即可通过GraphQL发送以下查询语句：
query getCourseById($id: ID!){ course(id: $id){ title teacher } }
查询变量：
{ "id":1 }
我们将会响应：
{ "data": { "course": { "title": "Web Development", "teacher": "John Doe" } } }
测试查询2：分页获取多个课程详情，该类型的查询如以下代码：
query getCourses($page: Int!, $limit:Int!){ courses(page:$page, limit:$limit){ id title teacher } }
查询变量：
{ "page": 2, "limit": 1 }
响应如下：
-- -------------------- ---- ------- - ------- - ---------- - - ----- -- -------- ------- ------------- ---------- ----- ---- - - - -展开代码
结束语
GraphQL是一种优秀的API语言，它使得前端开发者能够轻松地将DJANGO、NODE等SERVER转换为快速、灵活的API。在Koa2中使用GraphQL的过程也是很简单的，编写GraphQL模式、数据源、数据模型以及解决程序，将它们连接在一起，最后建立服务并测试即可。我相信，在仔细阅读本文后，你已经可以轻松地在Koa2中使用GraphQL了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2033d314edc2684af6c5a
