GraphQL入门1

1. 资源:

     主站: https://graphql.org/

     中文站: http://graphql.cn

     入门视频: https://graphql.org/blog/rest-api-graphql-wrapper/ 这个网址中向下拉, 会看到这个入门视频:

   

 

   从第15分钟看到第30分钟就可以.

   官方Tutorial: https://graphql.org/graphql-js/mutations-and-input-types/ 

2. 服务器端代码示例.

     a) 首先用VS2013新建一个Node.js express 4项目.

      

 

 

 b) 添加一个router, 当然也可以直接用app.js.这里为了不影响其他router, 新建了一个router.

  

 

 

 

c) GraphQL.js的内容如下:

var express = require('express');

var graphQLHTTP = require('express-graphql');

var schema = require('../schemas/Schema1');

var router = express.Router();

 

router.use(graphQLHTTP({

    schema: schema,

    graphiql : true

}));

 

module.exports = router;

 

d) Schema1.js 的内容如下:

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');

 

var BASE_URL = 'http://localhost:3000';

 

function getPersonByUrl(relativeURL) {

    return { first_name: "Wang", last_name: "Tom" };

 

    //fetch('${BASE_URL}${relativeURL}')

    //    .then(function (res) { return res.json() })

    //    .then(function (json) { return json.person })

}

 

var PersonType = new GraphQLObjectType({

    name: 'Person',

    description: '...',

    fields: {

        firstName: {

            type: GraphQLString,

            resolve : function (person) {

               return person.first_name

            }

        },

        lastName: {

            type: GraphQLString,

            resolve : function (person) {

                return person.last_name

            }

        },

        //email: { type: GraphQLString },

        //userName: { type: GraphQLString },

        //id: { type: GraphQLString },

        //friends: {

        //    type: GraphQLList(PersonType),

        //    resolve: function (person) {

        //        return person.friends.map(getPersonByUrl);

        //    }

        //}

    }

});

 

var QueryType = new GraphQLObjectType({

    name: 'Query',

    desription: '...',

    fields: {

        person: {

            type: PersonType,

            args: {

                id: {type: GraphQLString}

            },

            resolve: function () { return getPersonByUrl('/people/${args.id}') }

        }

    }

   

});

 

var GraphQLSchemaObj = new GraphQLSchema({

    query: QueryType

});

 

 

module.exports = GraphQLSchemaObj;

 

e) 代码中用到的node module都要装上.

f) VS中按F5运行起来后, http://localhost:<端口号>/<新建的router>就是基于GraphQL建立的router.

    访问 http://localhost:<端口号>/<新建的router>/graphql就可以看到测试页面, 输入查询就可以看到结果.

    

 

     router中的graphiql : true参数应该就是控制是否有这个测试页面的.

 

3. 客户端代码示例:

   a) 建立一个Node console application.

 

 

   b) 在app.js中写入如下的代码:

 

 

 

console.log('Hello world');

 

var gRequest = require('graphql-request').request;

 

const query = '{'

            + ' person(id:"1"){'

            + '    firstName'

            + '  }'

            + '}';

 

gRequest('http://localhost:1337/graphql/graphql', query).then(function (data) { console.log(data) });

 

   执行node app.js后,结果如下:

 

 

 

4. 上面说的都是Node.js的版本, 其他语言的服务器和客户端的API看这个页面: http://graphql.cn/code/