将服务器端的代码升级了一下:

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;

主要有以下几处更改:

  1. 将模拟的数据源persons单独提出来成为一个全局变量.
  2. 数据源中增加了department等几个属性.
  3. getPersonByUrl函数支持id和department参数.
  4. 增加了getFriendByPersonId函数用来解析friends属性.
  5. 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) {'

+ ' 
person(department: $dept) {'

+ '   
...personFields'

+ ' 
}'

+ '}'

+ ''

+ 'fragment personFields on Person {'

+ ' 
firstName,'

+ ' 
lastName,'

+ '  department,'

+ ' 
friends{'

+ '   
firstName,'

+ '   
lastName'

+ ' 
}'

+ '}';

var varibles =

{

"dept": "Depart1"

};

//gRequest('http://localhost:1337/graphql/graphql',
query).then(function (data) { console.log(data) });

gRequest('http://localhost:1337/graphql/graphql', query, varibles).then(function (data) {

console.log(util.inspect(data, {
showHidden: false, depth: null }))

});

};

运行结果如下:

{ person:

{ firstName: 'Jack',

lastName: 'Zhang',

department: 'Depart1',

friends: [ { firstName:
'Jack', lastName: 'Zhang' } ] } }

Directives:

//Test6: Directives

var gRequest = require('graphql-request').request;

var util = require('util');

exports.Execute = function () {

var query = 'query PersonWithDept($dept: String, $withFriends:
Boolean!) {'

+ '  person(department: $dept) {'

+ '    ...personFields'

+ '  }'

+ '}'

+ ''

+ 'fragment personFields on
Person {'

+ '  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',
query).then(function (data) { console.log(data) });

gRequest('http://localhost:1337/graphql/graphql', query, varibles1).then(function (data) {

console.log(util.inspect(data, {
showHidden: false, depth: null }))

});

gRequest('http://localhost:1337/graphql/graphql', query, varibles2).then(function (data) {

console.log(util.inspect(data, {
showHidden: false, depth: null }))

});

};

运行结果如下:

{ person: { firstName: 'Jack', lastName: 'Zhang', department:
'Depart1' } }

{ person:

{ firstName: 'Jack',

lastName: 'Zhang',

department: 'Depart1',

friends: [ { firstName:
'Jack', lastName: 'Zhang' } ] } }

注意客户端代码中使用了,是为了打印出json的子对象,

GraphQL入门2的更多相关文章

  1. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  2. GraphQL入门有这一篇就足够了

    GraphQL入门有这一篇就足够了:https://blog.csdn.net/qq_41882147/article/details/82966783 版权声明:本文为博主原创文章,遵循 CC 4. ...

  3. GraphQL入门1

    1. 资源: 主站: https://graphql.org/ 中文站: http://graphql.cn 入门视频: https://graphql.org/blog/rest-api-graph ...

  4. Graphql入门

    Graphql入门 GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API.服务端可以用任何的语言实现.具体的你可以查看Facebook关于GraphQL的文档和各种语言 ...

  5. GraphQL 入门介绍

    写在前面 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一种基于api ...

  6. GraphQL入门3(Mutation)

    创建一个新的支持Mutation的Schema. var GraphQLSchema = require('graphql').GraphQLSchema; var GraphQLObjectType ...

  7. 《分享》Graphql入门与实践

    最近项目用到了graphql,学习了一些并在公司做了一个小分享,希望对你有帮助 一.介绍 Graphql是一种面向数据的API查询语言 Graphql给前端提供一种强力的查询工具,我们可以根据自己定义 ...

  8. GraphQL快速入门教程

    摘要: 体验神奇的GraphQL! 原文:GraphQL 入门详解 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. GraphQL简介 定义 一种用于API调用的数据查询语言 ...

  9. 前端从零开始学习Graphql

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

随机推荐

  1. python 全栈开发,Day101(redis操作,购物车,DRF解析器)

    昨日内容回顾 1. django请求生命周期? - 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者po ...

  2. Grafana 监控系统是否重启

    一.概述 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻易的在调试器中执行和跟踪.开发者认为,内核如果发生了错误,就不应该继续运 行.因此内核发生错误时,它的行为通 ...

  3. #9 //[SDOI2017]新生舞会

    题解: 分数规划+费用流 常数巨大开o2加inline加register还是不行 我也不知道为什么 代码: #include <bits/stdc++.h> using namespace ...

  4. php中$this->是什么意思

    $this 的含义是表示    实例化后的 具体对象! 我们一般是先声明一个类,然后用这个类去实例化对象! 但是,当我们在声明这个类的时候,想在类本身内部使用本类的属性或者方法.应该怎么表示呢? 例如 ...

  5. 【Java】 剑指offer(4) 替换空格

    本文参考自<剑指offer>一书,代码采用Java语言.  更多:<剑指Offer>Java实现合集 题目 请实现一个函数,把字符串中的每个空格替换成"%20&quo ...

  6. 017 SpringMVC中CRUD实例

    一:新建项目(下面的几乎属于公共的方法,不需要改动) 1.结构 2.添加lib 3.配置web.xml <?xml version="1.0" encoding=" ...

  7. C#资源管理器

    窗体搭建:ContextMenuStrip右键菜单,Treeview树形菜单,Listview控件 新建"我的文件"类: public class MyFile { public ...

  8. OpenCV中cv2的用法

    一.读入图像 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整路径 flags:读入图片的标志  cv2.IMREAD_COLOR:默认参数 ...

  9. 在Macos下完美解决Adobe Dreamweaver CC 2018 汉化及操作方法

    1.先关闭Dreamweaver,打开Finder进入应用程序,找到“Adobe Dreamweaver CC 2018”目录展开,移除“zh_CN”目录或者更名: 2.下载附件的汉化语言包解压,把解 ...

  10. POJ-1511 Invitation Cards (单源最短路+逆向)

    <题目链接> 题目大意: 有向图,求从起点1到每个点的最短路然后再回到起点1的最短路之和. 解题分析: 在求每个点到1点的最短路径时,如果仅仅只是遍历每个点,对它们每一个都进行一次最短路算 ...