Que's Blog

WebFrontEnd Development

0%

React全家桶:react-starter-kit之三

发表于 阅读次数：
上一篇写完也是好多天前的事情了。一直是觉得有些东西还需要记录下来。但是说到底程序跑通以后就不是很有耐心写blog，不过慢慢随着时间推移记忆会慢慢褪色，所以完善一下系列三。这里主要记录一下GraphQL。

之前

在之前写分页功能时候，曾经添加过一个count的小接口，可以通过GraphQL来查询news的条目数。这里我们就以此来实例说明如何使用GraphQL来做一个接受一个查询。

这个接口具备两种逻辑处理。

  1. 当没有传递指定标签id时候返回全部条目
  2. 指定标签id时候返回指定id的条目数

过程

类型系统

在进行查询之前我们需要对字段类型进行约束。
文件: data/types/NewsCountType.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import {
  GraphQLObjectType as ObjectType,
  GraphQLInt as IntType,
} from 'graphql';

const NewsCountType = new ObjectType({
  name: 'NewsCount',
  fields: {
    count:{type:IntType}
  },
});

export default NewsCountType;

这里使用GraphQLObjectType来定义了返回的是一个对象，GraphQLInt则定义了返回的count属性是一个数字。
当然，这里只是非常的简单了使用了一个小案例。这里列举一下更多的类型定义。

  • GraphQLScalarType:Scalar Types，标量类型。最细粒度的类型
    • GraphQLInt:Int
    • GraphQLFloat:Float
    • GraphQLString:String
    • GraphQLBoolean:Boolean
    • GraphQLID:ID
  • GraphQLObjectType:对象
  • GraphQLInterfaceType:接口
  • GraphQLUnionType:联合
  • GraphQLEnumType:枚举
  • GraphQLInputObjectType:输入对象
  • GraphQLList:列表
  • GraphQLNonNull:NonNull

GraphQLObjectType

几乎所有的GraphQL都是Object对象。它具有一个name属性和一个非常重要的fields属性，这里定义了它的数据结构。就像之前，贴出的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var AddressType = new GraphQLObjectType({
  name: 'Address',
  fields: {
    street: { type: GraphQLString },
    number: { type: GraphQLInt },
    formatted: {
      type: GraphQLString,
      resolve(obj) {
        return obj.number + ' ' + obj.street
      }
    }
  }
});

var PersonType = new GraphQLObjectType({
  name: 'Person',
  fields: () => ({
    name: { type: GraphQLString },
    bestFriend: { type: PersonType },
  })
});

GraphQLInterfaceType

(这块暂时不是太理解,见谅)
When a field can return one of a heterogeneous set of types, a Interface type is used to describe what types are possible, what fields are in common across all types, as well as a function to determine which type is actually used when the field is resolved.

1
2
3
4
5
6
var EntityType = new GraphQLInterfaceType({
  name: 'Entity',
  fields: {
    name: { type: GraphQLString }
  }
});

GraphQLUnionType

当一个字段可以返回一个异构集合的类型中的一种，一个Union类型用于描述什么类型是可能的，以及提供一个函数，以确定哪些类型时该字段被解析实际使用。

1
2
3
4
5
6
7
8
9
10
11
12
var PetType = new GraphQLUnionType({
  name: 'Pet',
  types: [ DogType, CatType ],
  resolveType(value) {
    if (value instanceof Dog) {
      return DogType;
    }
    if (value instanceof Cat) {
      return CatType;
    }
  }
});

GraphQLEnumType

可枚举的数据类型

1
2
3
4
5
6
7
8
var RGBType = new GraphQLEnumType({
  name: 'RGB',
  values: {
    RED: { value: 0 },
    GREEN: { value: 1 },
    BLUE: { value: 2 }
  }
});

GraphQLInputObjectType

为了查询对象定义的数据类型.

1
2
3
4
5
6
7
8
var GeoPoint = new GraphQLInputObjectType({
  name: 'GeoPoint',
  fields: {
    lat: { type: new GraphQLNonNull(GraphQLFloat) },
    lon: { type: new GraphQLNonNull(GraphQLFloat) },
    alt: { type: GraphQLFloat, defaultValue: 0 },
  }
});

GraphQLList

列表是其他类型的封装，通常用于对象字段的描述。

1
2
3
4
5
6
7
const PersonType = new GraphQLObjectType({
  name: 'Person',
  fields: () => ({
    parents: { type: new GraphQLList(Person) },
    children: { type: new GraphQLList(Person) },
  })
});

GraphQLNonNull

Non-Null 强制类型的值不能为 null.在请求出错时会报错。

小结

类型系统是GraphQL重要的组成部分之一，它规定了数据的类型。如果数据不符合指定的类型，GraphQL将会自动进行报错。这对调试接口非常重要。同时可以强制接口符合约定，保证代码的健壮性。

查询

GraphQL的查询语句相信是GraphQL最吸引人的地方，我个人认为，没有之一。
这里简单记录一下自己近段时间做的东西。主要包含前端和后端的实现，没有用到的地方就暂时不记录了。
这是获取数据的代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
resetNewsState:function (context,currentPage,pageSize,hotTag) {
	 const self = this;
	 //获取新的数据
	 fetch('/graphql', {
		 method: 'post',
		 headers: {
			 Accept: 'application/json',
			 'Content-Type': 'application/json'
		 },
		 body: JSON.stringify({
		 query: `{news( currentPage:${currentPage||this.props.currentPage}, pageSize:${pageSize||this.props.pageSize}, hotTag:${hotTag||9999} ){title,link,contentSnippet}, tags{name,id}, count( hotTag:${hotTag||9999} ){count}}`
		 }),
		 credentials: 'include'
	 }).then(async function (resp) {
		 let { data } = await resp.json();
		 //设置全局store提供给页码组件
		 //总条目数
		 self.props.setRuntime({
			 name:"newsTotalItem",
			 value:data.count.count
		 });


		 //内部状态
		 (context||this).setState({
			 news:data.news,
			 tags:data.tags,
			 newsLoading:false
		 });
	 });
 },

其中 query就是其中关键的查询代码。GraphQL的查询代码个人认为如果做好了配置，那么几乎是所见即所得的。如果这样还不太好理解。那么我就贴一下请求参数的反悔响应：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//request
"{
  news(
    currentPage:1,
    pageSize:10,
    hotTag:9999
){title,link,contentSnippet},
tags{name,id},
count(
  hotTag:9999
){count}}"
//response
{
  "data": {
    "news": [
      {
        "title": "测试标题1",
        "link": "http://www.baidu.com",
        "contentSnippet": "测试摘要测试摘要"
      },
      {
        "title": "测试标题2",
        "link": "http://www.baidu.com",
        "contentSnippet": "测试摘要测试摘要"
      },
    ],
    "tags": [
      {
        "name": "javascript",
        "id": "1"
      },
      {
        "name": "css",
        "id": "2"
      }
    ],
    "count": {
      "count": 17
    }
  }
}

是不是很容易理解呢？通过编写查询语句，几乎就可以前端自己设计好需要的需要的json数据，从而优化请求。当然，这紧紧是前端部分。当我们使用以下代码查询条目数的时候，指定了hotTag的id为9999(这里是一个特殊标志符，代表查询全部hotTag)。

1
2
3
count(
  hotTag:9999
){count}}

其中， count:{type:IntType}规定了hotTag参数必须为数字。这个在第一个代码片段有写。但是这紧紧是前端的查询，为了获取到想要的数据，我们还需要后端也做好相应的查询操作。

以下贴出查询的完整查询代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//=============================
//src/data/queries/newsCount.js
//=============================

import { GraphQLInt } from 'graphql';
import fetch from '../../core/fetch';
import NewsCountType from '../types/NewsCountType';

// React.js News Feed (RSS)
const url = '/api/news';

let count = 0;
let lastFetchTask;

const newsCount = {
  type: NewsCountType,
  args: {
    hotTag:{ type: GraphQLInt}
  },
  async resolve(reqObj,{hotTag}) {
      lastFetchTask = await fetch(url,{
          method: 'post',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({hotTag}),
          credentials: 'include',
        })
        .then(response => response.json())
        .then(data => {
          if (data.code === 200) {
            count = data.count;
          }

          return {count};
        })
        .finally(() => {
          lastFetchTask = null;
        });

      if (count.length) {
        return {count};
      }

      return lastFetchTask;
  },
};

export default newsCount;

//===================
//src/data/schema.js
//===================

import {
  GraphQLSchema as Schema,
  GraphQLObjectType as ObjectType,
} from 'graphql';

import tags from './queries/tags';
import content from './queries/content';
import news from './queries/news';
import count from './queries/newsCount';

const schema = new Schema({
  query: new ObjectType({
    name: 'Query',
    fields: {
      tags,
      content,
      news,
      count
    },
  }),
});

export default schema;

src/data/queries/newsCount.js文件是对数据进行具体查询和定义参数的文件，而src/data/schema.js则导出了一个Schema。

在这里我们可以发散一下，当我们要使用和定义后端的GraphQL相关，那么该怎么做呢：
我们需要一个GraphGL的Schema。它有以下结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const schema = new Schema({
  query: new ObjectType({
    name: 'Query',
    fields: {
	count:{
		type: NewsCountType,
		args: {
			hotTag:{ type: GraphQLInt}
		},
		resolve:function(reqObj,paramObj){

		}
	}
    },
  }),
});

结合我们的类型系统，是不是很有感觉了呢？是的，当我们反复循环嵌套相关的数据类型，然后使用Schema返回。那么就可以配合前两篇文章写到的。从前端后端两个方面来实现GraphQL的对接。

收个尾

写到这里心里其实有些索然。因为感觉没有说到很深入的境地。但是怎么说呢，通过这篇文章好好体会一下，应该也可以在react-starter-kit里面使用GraphQL了，毕竟正常使用应该也用不到太过复杂的功能。

然而毕竟事情未能尽善，从第一篇到这一篇，期间磨磨蹭蹭一个月也过去了，新东西太多太快但是时间精力有限。限于个人水平文章也无法写的很通俗，但是确实是用心去做了。

有时间把源代码整理完毕一起放出来供参考。