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

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. LeetCode(5):最长回文子串

    Medium! 题目描述: 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 长度最长为1000. 示例: 输入: "babad" 输出: "bab&quo ...

  2. C# byte数组与Image的相互转换【转】

    功能需求: 1.把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库. 2.把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示. 3.从图片byte ...

  3. 《转》理解restful

    越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...

  4. 空指针null

    Java中,null是一个关键字,用来标识一个不确定的对象.因此可以将null赋给引用类型变量,但不可以将null赋给基本类型变量 Java默认给变量赋值:在定义变量的时候,如果定义后没有给变量赋值, ...

  5. C# Winform OpenFileDialog 控件

    OpenFileDialog控件又称打开文件对话框,主要用来弹出Windows中标准的[打开文件]对话框. OpenFileDialog控件的常用属性如下. (1)Title属性:用来获取或设置对话框 ...

  6. Codeforces Round #467 (Div. 2) E -Lock Puzzle

    Lock Puzzle 题目大意:给你两个字符串一个s,一个t,长度<=2000,要求你进行小于等于6100次的shift操作,将s变成t, shift(x)表示将字符串的最后x个字符翻转后放到 ...

  7. 【Java】 剑指offer(66) 构建乘积数组

      本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 给定一个数组A[0, 1, …, n-1],请构建一个数组B[ ...

  8. hdu 1272 小希的迷宫【并查集】

    <题目链接> 小希的迷宫 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的 ...

  9. HDU 1025 城市供应 【LIS】

    题目链接:https://vjudge.net/contest/228455#problem/A 题目大意: 有2n个城市,其中有n个富有的城市,n个贫穷的城市,其中富有的城市只在一种资源富有,且富有 ...

  10. Spring Boot 项目实战(三)集成 Swagger 及 JavaMelody

    一.前言 上篇介绍了 Logback 的集成过程,总体已经达到了基本可用的项目结构.本篇主要介绍两个常用工具,接口文档工具 Swagger .项目监控工具 JavaMelody 的集成步骤. 二.Sw ...