GraphQL入门2
将服务器端的代码升级了一下:
|
var GraphQLSchema = require('graphql').GraphQLSchema; var GraphQLObjectType = require('graphql').GraphQLObjectType; var GraphQLString = require('graphql').GraphQLString; var GraphQLList = require('graphql').GraphQLList; var fetch = require('node-fetch'); require("babel-polyfill"); var BASE_URL = 'http://localhost:3000'; var persons = [ { id: "1", first_name: "Jack", last_name: "Zhang" , department: "Depart1", friends: [1] }, { id: "2", first_name: "Tom", last_name: "Wang" , department: "Depart2", friends: [1, 2] } ]; function getPersonByUrl(args, relativeURL) { var person = persons.find(function (item) { if (args.id) { return item.id == args.id; } if (args.department) { return item.department == args.department; } }); return person; //fetch('${BASE_URL}${relativeURL}') // .then(function (res) { return res.json() }) // .then(function (json) { return json.person }) } function getFriendByPersonId(friendID) { var person = persons.find(function (item) { return item.id == friendID; }); return person; //fetch('${BASE_URL}${relativeURL}') // .then(function (res) { return res.json() }) // .then(function (json) { return json.person }) } var PersonType = new GraphQLObjectType( { name: 'Person', description: '...', fields: ()=>({ id: { type: GraphQLString, resolve : function (person) { return person.first_name; } }, firstName: { type: GraphQLString, resolve : function (person) { return person.first_name; } }, lastName: { type: GraphQLString, resolve : function (person) { return person.last_name; } }, department: { type: GraphQLString, resolve : function (person) { return person.department; } }, //email: { type: GraphQLString }, //userName: { type: GraphQLString }, //id: { type: GraphQLString }, friends: { type: new GraphQLList(PersonType), resolve: function (person) { return person.friends.map(getFriendByPersonId); } } }) }); var QueryType = new GraphQLObjectType({ name: 'Query', desription: '...', fields: { person: { type: PersonType, args: { id: { type: GraphQLString }, department: { type: GraphQLString } }, resolve: function (obj, args, context, info) { return getPersonByUrl(args, null); } } } }); var GraphQLSchemaObj = new GraphQLSchema({ query: QueryType }); module.exports = GraphQLSchemaObj; |
主要有以下几处更改:
- 将模拟的数据源persons单独提出来成为一个全局变量.
- 数据源中增加了department等几个属性.
- getPersonByUrl函数支持id和department参数.
- 增加了getFriendByPersonId函数用来解析friends属性.
- PersonType的fields属性使用了()=>来解决friends属性中使用本类型时本类型尚未初始化的问题.
下面是客户端的测试代码:
app.js
|
console.log('Hello world'); ////Arguments //var Test1 = require('./Test1'); //Test1.Execute(); ////Alias //var Test2 = require('./Test2'); //Test2.Execute(); ////Alias with sub-selection //var Test3 = require('./Test3'); //Test3.Execute(); ////Fragments //var Test4 = require('./Test4'); //Test4.Execute(); //Variblies //var Test5 = require('./Test5'); //Test5.Execute(); //Directives //var Test6 = require('./Test6'); //Test6.Execute(); |
具体的测试类:
Alias:
|
//Test2: Aliases var gRequest = require('graphql-request').request; exports.Execute = function () { const query = '{' + ' Depart1Person: person(department: "Depart1") {' + ' firstName,' + ' lastName,' + ' department' + ' }' + ' Depart2Person: person(department: "Depart2") {' + ' firstName,' + ' lastName,' + ' department' + ' }' + '}'; gRequest('http://localhost:1337/graphql/graphql', query).then(function (data) { console.log(data) }); }; |
运行结果如下:
|
{ Depart1Person: { firstName: 'Jack', lastName: 'Zhang', department: 'Depart1' }, Depart2Person: { firstName: 'Tom', lastName: 'Wang', department: 'Depart2' } } |
Aliases -- sub selection
|
//Test3: Aliases -- sub selection var gRequest = require('graphql-request').request; var util = require('util'); exports.Execute = function () { const query = '{' + ' Depart1Person: person(department: "Depart1") {' + ' firstName,' + ' lastName,' + ' department,' + ' friends' + ' {' + ' firstName,' + ' lastName' + ' }' + ' }' + ' Depart2Person: person(department: "Depart2") {' + ' firstName,' + ' lastName,' + ' department,' + ' friends' + ' {' + ' firstName,' + ' lastName' + ' }' + ' }' + '}'; gRequest('http://localhost:1337/graphql/graphql', query).then(function (data) { console.log(util.inspect(data, { showHidden: false, depth: null })) }); }; |
运行结果如下:
|
{ Depart1Person: { firstName: 'Jack', lastName: 'Zhang', department: 'Depart1', friends: [ { firstName: 'Jack', lastName: 'Zhang' } ] }, Depart2Person: { firstName: 'Tom', lastName: 'Wang', department: 'Depart2', friends: [ { firstName: 'Jack', lastName: 'Zhang' }, { firstName: 'Tom', lastName: 'Wang' } ] } } |
Fragements:
|
//Test4: Fragements var gRequest = require('graphql-request').request; var util = require('util'); exports.Execute = function () { var query = '{' + ' Depart1Person: person(department: "Depart1") {' + ' ...personFields' + ' }' + ' Depart2Person: person(department: "Depart2") {' + ' ...personFields' + ' }' + '}' + '' + 'fragment personFields on Person {' + ' firstName,' + ' lastName,' + ' department,' + ' friends{' + ' firstName,' + ' lastName' + ' }' + '}'; //gRequest('http://localhost:1337/graphql/graphql', query).then(function (data) { console.log(data) }); gRequest('http://localhost:1337/graphql/graphql', query).then(function (data) { console.log(util.inspect(data, { showHidden: false, depth: null })) }); }; |
运行结果如下:
|
{ Depart1Person: { firstName: 'Jack', lastName: 'Zhang', department: 'Depart1', friends: [ { firstName: 'Jack', lastName: 'Zhang' } ] }, Depart2Person: { firstName: 'Tom', lastName: 'Wang', department: 'Depart2', friends: [ { firstName: 'Jack', lastName: 'Zhang' }, { firstName: 'Tom', lastName: 'Wang' } ] } } |
Varibles:
|
//Test5: Variables var gRequest = require('graphql-request').request; var util = require('util'); exports.Execute = function () { var query = 'query PersonWithDept($dept: String) {' + ' + ' + ' + '}' + '' + 'fragment personFields on Person {' + ' + ' + ' department,' + ' + ' + ' + ' + '}'; var varibles = { "dept": "Depart1" }; //gRequest('http://localhost:1337/graphql/graphql', gRequest('http://localhost:1337/graphql/graphql', query, varibles).then(function (data) { console.log(util.inspect(data, { }); }; |
运行结果如下:
|
{ person: { firstName: 'Jack', lastName: 'Zhang', department: 'Depart1', friends: [ { firstName: |
Directives:
|
//Test6: Directives var gRequest = require('graphql-request').request; var util = require('util'); exports.Execute = function () { var query = 'query PersonWithDept($dept: String, $withFriends: + ' person(department: $dept) {' + ' ...personFields' + ' }' + '}' + '' + 'fragment personFields on + ' firstName,' + ' lastName,' + ' department,' + ' friends @include(if: $withFriends){' + ' firstName,' + ' lastName' + ' }' + '}' ; var varibles1 = { "dept": "Depart1", "withFriends": true }; var varibles2 = { "dept": "Depart1", "withFriends": false }; //gRequest('http://localhost:1337/graphql/graphql', gRequest('http://localhost:1337/graphql/graphql', query, varibles1).then(function (data) { console.log(util.inspect(data, { }); gRequest('http://localhost:1337/graphql/graphql', query, varibles2).then(function (data) { console.log(util.inspect(data, { }); }; |
运行结果如下:
|
{ person: { firstName: 'Jack', lastName: 'Zhang', department: { person: { firstName: 'Jack', lastName: 'Zhang', department: 'Depart1', friends: [ { firstName: |
注意客户端代码中使用了,是为了打印出json的子对象,
GraphQL入门2的更多相关文章
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
- GraphQL入门有这一篇就足够了
GraphQL入门有这一篇就足够了:https://blog.csdn.net/qq_41882147/article/details/82966783 版权声明:本文为博主原创文章,遵循 CC 4. ...
- GraphQL入门1
1. 资源: 主站: https://graphql.org/ 中文站: http://graphql.cn 入门视频: https://graphql.org/blog/rest-api-graph ...
- Graphql入门
Graphql入门 GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API.服务端可以用任何的语言实现.具体的你可以查看Facebook关于GraphQL的文档和各种语言 ...
- GraphQL 入门介绍
写在前面 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一种基于api ...
- GraphQL入门3(Mutation)
创建一个新的支持Mutation的Schema. var GraphQLSchema = require('graphql').GraphQLSchema; var GraphQLObjectType ...
- 《分享》Graphql入门与实践
最近项目用到了graphql,学习了一些并在公司做了一个小分享,希望对你有帮助 一.介绍 Graphql是一种面向数据的API查询语言 Graphql给前端提供一种强力的查询工具,我们可以根据自己定义 ...
- GraphQL快速入门教程
摘要: 体验神奇的GraphQL! 原文:GraphQL 入门详解 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. GraphQL简介 定义 一种用于API调用的数据查询语言 ...
- 前端从零开始学习Graphql
学习本姿势需要电脑装有node,vue-cli相关环境,以及要有node,express,koa,vue相关基础 本文相关demo的github地址: node服务:https://github.co ...
随机推荐
- Elasticsearch创建索引和映射结构详解
前言 这篇文章详细介绍了如何创建索引和某个类型的映射. 下文中[address]指代elasticsearch服务器访问地址(http://localhost:9200). 1 创建索引 ...
- Spring整合Quartz实现动态定时器,相关api,定时器添加,删除,修改
一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...
- Hibernate之关联关系映射(一对一主键映射和一对一外键映射)
1:Hibernate的关联关系映射的一对一外键映射: 1.1:第一首先引包,省略 1.2:第二创建实体类: 这里使用用户信息和身份证信息的关系,用户的主键编号既可以做身份证信息的主键又可以做身份证信 ...
- struts2的文件上传和文件下载
实现使用Struts2文件上传和文件下载: 注意点: (1)对应表单的file1和私有成员变量的名称必须一致 <input type="file" name="fi ...
- Struts2的常见的配置文件介绍
1:package 定义一个包. 包作用,管理action. (通常,一个业务模板用一个包) 常见属性及其说明: (1)name 包的名字:以方便在其他处引用此包,此属性是必须的. 包名不能重复: ...
- mongo3.x配置说明
Mongodb 3.x配置说明,本文内容忽略了Enterprise版和一些不常用的配置. 一.配置说明 在Mongod安装包中,包含2个进程启动文件:mongod和mongos:其中mongd是核心基 ...
- [SDOI2012]拯救小云公主
题解: 是一个不错的题目 首先我们可以考虑二分答案 然后变成判定性问题 对于每个画一个圆 当其会被阻断时就是答案 阻断有四种情况 左下 上下 左右 右上 但是这样是n^2a(n)*logn的 考虑直接 ...
- day1作业--登录接口
作业:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 知识: 1.循环的使用: 2.continue,break在循环中中断的作用: 3.文件的写入,读取: 4.各基础知 ...
- [转]MyEclipse8.5破解方法
本文是转自其它博文,用以留着备份的~ Step: 1.建立一个任意名称的Java Project 2.在该工程中建立一个名文MyEclipseGen的Java文件(MyEclipseGen.java) ...
- Linux useradd -M -s
groupadd mysql #创建mysql分组 useradd -M(不创建主目录) -s(不允许登录) /sbin/nologin mysql -g(加入mysql组) mysql