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 ...
随机推荐
- CCF2014032窗口(C语言)
问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的 ...
- 【splunk】用正则表达式提取字段
设input输入数据为 http://192.168.23.121/xxx 想提取出里面的ip,可以用rex source="xxx.csv" |rex field=input ...
- 【linux】crontab失效
在linux上,crontab任务全部使用完整路径,但是任务无效. 检测crontab 服务是否启动, /etc/init.d/cron status /etc/init.d/cron restart
- 步步为营-53-JavaScript
说明 :JS比较常用 1.1 常见的两种使用方式: 1.1.1 直接使用 <script>alert('Hello,World')</script> 1.1.2 引用 ...
- winform连接oracle时Oracle.DataAccess.dll版本问题 Silverlight
1.通用TestOracle.zip部署到iis上,或直接运行程序测试当前全局程序集 protected void Button1_Click(object sender, EventArgs e) ...
- DDD领域模型实现依赖注入(六)
添加下订单的值对象: public partial class CustomerInfo:ValueObject { /// <summary> /// 下订单的值对象 /// </ ...
- 【C++ Primer 第13章】5. 动态内存管理类
StrVec类的设计 [题目描述]:我们将实现标准库vector类的一个简化版本,我们所做的一个简化是不使用模板,我们类只用于string,因此,它被命名为StrVec. #include<io ...
- 桌面版centos安装vncserver并在windows下使用VNC Viewer远程连接
首先关闭防火墙 在Centos中安装vncserver yum install tigervnc-server 拷贝一份 /lib/systemd/system/vncserver@.service ...
- python小工具myqr生成动态二维码
python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...
- springboot项目接入配置中心,实现@ConfigurationProperties的bean属性刷新方案
前言 配置中心,通过key=value的形式存储环境变量.配置中心的属性做了修改,项目中可以通过配置中心的依赖(sdk)立即感知到.需要做的就是如何在属性发生变化时,改变带有@Configuratio ...