當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

GraphQL入门2

發布時間：2024/4/13 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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) {'

??????????? + '? 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： BZOJ4520:[CQOI2016]K
下一篇：用莫比乌斯带巧解内接矩形问题：拓扑学的用