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

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. CCF2014032窗口(C语言)

    问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的 ...

  2. 【splunk】用正则表达式提取字段

    设input输入数据为 http://192.168.23.121/xxx  想提取出里面的ip,可以用rex source="xxx.csv" |rex field=input ...

  3. 【linux】crontab失效

    在linux上,crontab任务全部使用完整路径,但是任务无效. 检测crontab 服务是否启动, /etc/init.d/cron status /etc/init.d/cron restart

  4. 步步为营-53-JavaScript

    说明 :JS比较常用 1.1 常见的两种使用方式: 1.1.1 直接使用 <script>alert('Hello,World')</script>      1.1.2 引用 ...

  5. winform连接oracle时Oracle.DataAccess.dll版本问题 Silverlight

    1.通用TestOracle.zip部署到iis上,或直接运行程序测试当前全局程序集 protected void Button1_Click(object sender, EventArgs e) ...

  6. DDD领域模型实现依赖注入(六)

    添加下订单的值对象: public partial class CustomerInfo:ValueObject { /// <summary> /// 下订单的值对象 /// </ ...

  7. 【C++ Primer 第13章】5. 动态内存管理类

    StrVec类的设计 [题目描述]:我们将实现标准库vector类的一个简化版本,我们所做的一个简化是不使用模板,我们类只用于string,因此,它被命名为StrVec. #include<io ...

  8. 桌面版centos安装vncserver并在windows下使用VNC Viewer远程连接

    首先关闭防火墙 在Centos中安装vncserver yum install tigervnc-server 拷贝一份  /lib/systemd/system/vncserver@.service ...

  9. python小工具myqr生成动态二维码

    python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...

  10. springboot项目接入配置中心,实现@ConfigurationProperties的bean属性刷新方案

    前言 配置中心,通过key=value的形式存储环境变量.配置中心的属性做了修改,项目中可以通过配置中心的依赖(sdk)立即感知到.需要做的就是如何在属性发生变化时,改变带有@Configuratio ...