zoukankan      html  css  js  c++  java
  • 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;

    主要有以下几处更改:

    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的子对象,

  • 相关阅读:
    [node.js学习]为node.js写的一个操作mysql的类
    极光IM简单接入步骤
    windows自带的netsh 端口转发
    nodejs 做的带管理后台的东东,主要学习到 ....我忘了学到什么了
    利用来JS控制页面控件显示和隐藏有两种方法
    phpstudy 出现You don't have permission to access / on this server.
    禁用input自动填充
    一般充值的流程
    jq传输json字符串
    ECSHOP更改后台顶部图片
  • 原文地址:https://www.cnblogs.com/time-is-life/p/9306028.html
Copyright © 2011-2022 走看看