初始化项目

创建 graphql-example 文件夹进入后初始化一个 package.json 文件。

$ mkdir graphql-example && cd $_
$ yarn init -y

安装依赖

使用 koa-graphql 配合 koa-mount 两个 npm 模块来使用 GraphQL。同时需要安装 graphql 模块来创建需要使用的 schema。

$ yarn add koa graphql koa-graphql koa-mount

server

安装 koa 后,创建 server.js 实现一个简单的服务端。

server.js

const Koa = require("koa");
const app = new Koa(); app.use(async ctx => {

ctx.body = "Hello World";

}); app.listen(3000);

console.log("server started at http://localhost:3000");

通过 Node.js 启动后便可访问到页面了。

$ node server.js
server started at http://localhost:3000

创建 schema

GraphQL 需要一个 schema 来初始化,创建 graphql 目录并在其中创建 schema.js 文件,

$ mkdir graphql
$ touch graphql/schema.js

schema.js

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

const schema = buildSchema(</span></span> <span class="pl-s"> type Query {</span> <span class="pl-s">   hello: String</span> <span class="pl-s"> }</span> <span class="pl-s"><span class="pl-pds">);

module.exports = schema;

启动 GraphQL 服务

将上面的 schema 传入 koa-graphql 然后通过 koa-mount 将其作为中间件启动,便可开启 GraphQL 服务。

server.js

const Koa = require("koa");
const mount = require("koa-mount");
const graphqlHTTP = require("koa-graphql");
const schema = require("./graphql/schema"); const app = new Koa(); app.use(

mount(

"/graphql",

graphqlHTTP({

schema: schema,

graphiql: true

})

)

); app.listen(3000);

console.log("server started at http://localhost:3000");

再次启动 server.js 并访问 http://localhost:3000/graphql 可看到一个可视化的 GraphQL 界面。该界面为 GraphQL 内置的 Graphiql 工具用于查询的调试。

Graphiql 界面

测试 GraphQL 服务

前面定义的 schema 中包含一个 hello 字段,通过在前面的 Graphiql 中编辑查询可请求该字段。

测试 Query

可以看到返回的数据为 null,这是因为我们还没有为该字段定义 resolver,即告诉 GraphQL 如何以及从哪里返回该数据。

添加 resolver

graphql 目录创建 resolver.js 文件,为 hello 字段指定数据的返回逻辑。

graphql/resolver.js

module.exports = {
hello: () => "Hello world!"
};

更新我们创建 GraphQL 服务的代码,将 resolver 传入:

server.js

const Koa = require("koa");
const mount = require("koa-mount");
const graphqlHTTP = require("koa-graphql");
const schema = require("./graphql/schema");
+ const root = require("./graphql/resolver"); const app = new Koa(); app.use(

mount(

"/graphql",

graphqlHTTP({

schema: schema,

+ rootValue: root,

graphiql: true

})

)

); app.listen(3000);

console.log("server started at http://localhost:3000");

再次启动服务并执行查询,能够看到返回了正确的数据。

返回数据的查询

相关资源

Koa + GraphQL 示例的更多相关文章

  1. 前端从零开始学习Graphql

    学习本姿势需要电脑装有node,vue-cli相关环境,以及要有node,express,koa,vue相关基础 本文相关demo的github地址: node服务:https://github.co ...

  2. 使用Hot Chocolate和.NET 6构建GraphQL应用(1)——GraphQL及示例项目介绍

    系列导航 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引 前言 这篇文章是这个系列的第一篇,我们会简单地讨论一下GraphQL,然后介绍一下这个系列将会使用的示例项目. 关 ...

  3. koa2+koa-views示例

    app.js var Koa = require('koa') var fs = require('fs') var path = require('path') var koaStaticPlus ...

  4. graphql 新API 开发方式

    我们知道 GraphQL 使用 Schema 来描述数据,并通过制定和实现 GraphQL 规范 定义了支持 Schema 查询的 DSQL (Domain Specific Query Langua ...

  5. 深入探析koa之异步回调处理篇

    在上一篇中我们梳理了koa当中中间件的洋葱模型执行原理,并实现了一个可以让洋葱模型自动跑起来的流程管理函数.这一篇,我们再来研究一下koa当中异步回调同步化写法的原理,同样的,我们也会实现一个管理函数 ...

  6. [转] Node.js 服务端实践之 GraphQL 初探

    https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.n88wyan4e 0.问题来了 DT 时代,各种业 ...

  7. 深入浅出Koa

    深入浅出Koa(1):生成器和Thunk函数 Koa是个小而美的Node.js web框架,它由Express的原班人马打造的, 致力于以一种现代化开发的方式构建web应用. 通过这个系列,你将能够理 ...

  8. 我的前端故事----我为什么用GraphQL

    背景 今年我在做一个有关商户的app,这是一个包含商户从入网到审核.从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件,但故事并没有这么简单... 疑问 随着app的逐渐完善,遇到的问题 ...

  9. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

随机推荐

  1. (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  2. Java之ssh框架spring配置文件配置定时任务

    最近做了一个数据同步功能,要求晚上0点去定时同步数据,这是个老项目框架用的ssh,定时任务基于quartz,废话不多说,下面详细说说相关配置. 在spring的配置文件中: <!-- 0点定时任 ...

  3. 超级简单的数组加单链表实现Map

    /** * 超级简单的数组加单链表实现Map * @author jlj * */ public class MyHashMap { public MyList[] lists; public int ...

  4. Add a Parametrized Action 添加带参数的按钮

    In this lesson, you will learn how to add a Parametrized Action. These types of Actions are slightly ...

  5. 关于async function(){ let res = await } 详解

    本文引自: https://www.jianshu.com/p/435a8b8cc7d3 async function fn(){ //表示异步,这个函数里面有异步任务 let result = aw ...

  6. SAP会计年度变式

       会计年度变式用来确定SAP系统中每个公司的会计记账期间的变式.顾名思议,每个公司的会计年度变式必须与其实际使用的会计年度匹配.     在SAP系统中,每个会计年度最多允许有16个记账期间,其中 ...

  7. ios中友盟集成好使用总结

    参考链接:https://www.jianshu.com/p/a8ff46a7c966

  8. iOS 为何使用runtime方法交换多次后却能按照交换顺序依次执行代码逻辑?

    题目: 假设我们有一个ViewController, Category A(ViewController), Category B(ViewController), Category C(ViewCo ...

  9. Thymeleaf常用语法:HTML属性设置

    使用Thymeleaf的属性来设置HTML属性.(1)使用th:attr属性可以修改原来HTML节点的属性:(2)th:attr属性可以同时设置多个属性:(3)每一个HTML属性都有对应的Thymel ...

  10. SSH远程管理

    目录 SSH远程管理 ssh功能 SSH相关命令 Xshell连接不上虚拟机 scp命令 SSH验证方式 优化 免交互expect[扩展] 免交互sshpass[扩展] 简易跳板机 小结 SSH远程管 ...