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 ...
随机推荐
- python 全栈开发,Day101(redis操作,购物车,DRF解析器)
昨日内容回顾 1. django请求生命周期? - 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者po ...
- Grafana 监控系统是否重启
一.概述 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻易的在调试器中执行和跟踪.开发者认为,内核如果发生了错误,就不应该继续运 行.因此内核发生错误时,它的行为通 ...
- #9 //[SDOI2017]新生舞会
题解: 分数规划+费用流 常数巨大开o2加inline加register还是不行 我也不知道为什么 代码: #include <bits/stdc++.h> using namespace ...
- php中$this->是什么意思
$this 的含义是表示 实例化后的 具体对象! 我们一般是先声明一个类,然后用这个类去实例化对象! 但是,当我们在声明这个类的时候,想在类本身内部使用本类的属性或者方法.应该怎么表示呢? 例如 ...
- 【Java】 剑指offer(4) 替换空格
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 请实现一个函数,把字符串中的每个空格替换成"%20&quo ...
- 017 SpringMVC中CRUD实例
一:新建项目(下面的几乎属于公共的方法,不需要改动) 1.结构 2.添加lib 3.配置web.xml <?xml version="1.0" encoding=" ...
- C#资源管理器
窗体搭建:ContextMenuStrip右键菜单,Treeview树形菜单,Listview控件 新建"我的文件"类: public class MyFile { public ...
- OpenCV中cv2的用法
一.读入图像 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整路径 flags:读入图片的标志 cv2.IMREAD_COLOR:默认参数 ...
- 在Macos下完美解决Adobe Dreamweaver CC 2018 汉化及操作方法
1.先关闭Dreamweaver,打开Finder进入应用程序,找到“Adobe Dreamweaver CC 2018”目录展开,移除“zh_CN”目录或者更名: 2.下载附件的汉化语言包解压,把解 ...
- POJ-1511 Invitation Cards (单源最短路+逆向)
<题目链接> 题目大意: 有向图,求从起点1到每个点的最短路然后再回到起点1的最短路之和. 解题分析: 在求每个点到1点的最短路径时,如果仅仅只是遍历每个点,对它们每一个都进行一次最短路算 ...