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/