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

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. Elasticsearch创建索引和映射结构详解

    前言 这篇文章详细介绍了如何创建索引和某个类型的映射. 下文中[address]指代elasticsearch服务器访问地址(http://localhost:9200). 1       创建索引 ...

  2. Spring整合Quartz实现动态定时器,相关api,定时器添加,删除,修改

    一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...

  3. Hibernate之关联关系映射(一对一主键映射和一对一外键映射)

    1:Hibernate的关联关系映射的一对一外键映射: 1.1:第一首先引包,省略 1.2:第二创建实体类: 这里使用用户信息和身份证信息的关系,用户的主键编号既可以做身份证信息的主键又可以做身份证信 ...

  4. struts2的文件上传和文件下载

    实现使用Struts2文件上传和文件下载: 注意点: (1)对应表单的file1和私有成员变量的名称必须一致 <input type="file" name="fi ...

  5. Struts2的常见的配置文件介绍

    1:package 定义一个包. 包作用,管理action. (通常,一个业务模板用一个包) 常见属性及其说明:  (1)name  包的名字:以方便在其他处引用此包,此属性是必须的. 包名不能重复: ...

  6. mongo3.x配置说明

    Mongodb 3.x配置说明,本文内容忽略了Enterprise版和一些不常用的配置. 一.配置说明 在Mongod安装包中,包含2个进程启动文件:mongod和mongos:其中mongd是核心基 ...

  7. [SDOI2012]拯救小云公主

    题解: 是一个不错的题目 首先我们可以考虑二分答案 然后变成判定性问题 对于每个画一个圆 当其会被阻断时就是答案 阻断有四种情况 左下 上下 左右 右上 但是这样是n^2a(n)*logn的 考虑直接 ...

  8. day1作业--登录接口

    作业:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定     知识: 1.循环的使用: 2.continue,break在循环中中断的作用: 3.文件的写入,读取: 4.各基础知 ...

  9. [转]MyEclipse8.5破解方法

    本文是转自其它博文,用以留着备份的~ Step: 1.建立一个任意名称的Java Project 2.在该工程中建立一个名文MyEclipseGen的Java文件(MyEclipseGen.java) ...

  10. Linux useradd -M -s

    groupadd mysql #创建mysql分组 useradd -M(不创建主目录) -s(不允许登录) /sbin/nologin mysql -g(加入mysql组) mysql