使用 React和GraphQL 做一个todo list

英文:Igor Ribeiro Lima 译文:众成翻译/乐何

zcfy.cc/article/graphql-overview-build-a-to-do-list-api-with-a-react-front-end-mdash-sitepoint

设想你想要参考食谱烤一个蛋糕。你将需要一些原料,并且一些合适的量。如果你能拿一个盒子装好你烘焙所需要的各种原料 ,并且已经称量好匹配菜谱的份量,那肯定会让烘焙更简单。如果你把前端 UI设想成一块蛋糕的话,那这就是GraphQL所做的事。

在本教程中我们将写一个小的GraphQL server 来响应Todo List app的请求。你也可以 在众多app中来挑选,但是这些日子我开始使用React做项目,所以我将会选择React来做前端框架。不过,你也可以挑选你用得习惯的任何js框架。

GraphQL

GraphQL允许我们定义 一个查询来提供一个通用的接口在客户端和服务端之间来请求和处理数据。它用一种查询语言来处理,允许客户端使用一种直观和灵活的语法和来按照客户端程序的设计和需求来构建和组装数据。

这使客户端从服务端 检索数据更加的高效。举个栗子,设想从一个GraphQL的实例中, 客户端除了title和id 其它的字段一概不要,那么这个模型应该是长这样:

query Query{

todos{

id,

title

}

}

结果数据(JSON)是:

Which produces the resulting data (in JSON):

{

"data":{

"todos":[

{

"id":1446412739542,

"title":"Read emails"

},

{

"id":1446412740883,

"title":"Buy orange"

},

{

"id":1446412741215,

"title":"Fix garbage"

}

]

}

}

大概我们的展示demo中没有保存数据。这背后的原因是每次我们都启动服务,在内存中存储的Todo(s)数组变为空了。我们将在下面的内容中展示如何向数组中添加数据。

如你所见,返回的格式已经被替换成了客户端已经定义和描述过了的查询格式。就像文章“GraphQL 概述 – GraphQL 和 Node.js 入门 ”中规定的。

GraphQL的查询都像是没有属性的JSON对象,GraphQL 不是一种语言特性这点被提到 很重要,它只是在客户端和服务端中间的一种规范。如果使用通用的语言,任何的客户端都能和任何服务端通信。

介绍 GraphQL.js

GraphQL.js是一种基于js的GraphQL参考模型,它提供了两个重要的功能:

创建一种类型的语法模型(schema)。

应该该类型的语法(schema)的查询 。

需要创建一个匹配代码基层的GraphQL 类型语法(schema)。在接下来的代码中,我们定义一个简单的语法(schema)。它有一种类型和一个汇总的Todo(s)列表(每个列表元素有含有三个字段),额外的,它还提供了服务于该类型语法(schema)和查询结果。

vargraphql=require('graphql');

// Here is some dummy data to make this piece of code simpler.

// It will be changeable after introducing mutation.

varTODOs=[

{

"id":1446412739542,

"title":"Read emails",

"completed":false

},

{

"id":1446412740883,

"title":"Buy orange",

"completed":true

}

];

varTodoType=newgraphql.GraphQLObjectType({

name:'todo',

fields:function(){

return{

id:{

type:graphql.GraphQLInt

},

title:{

type:graphql.GraphQLString

},

completed:{

type:graphql.GraphQLBoolean

}

}

}

});

varqueryType=newgraphql.GraphQLObjectType({

name:'Query',

fields:function(){

return{

todos:{

type:newgraphql.GraphQLList(TodoType),

resolve:function(){

returnTODOs;

}

}

}

}

});

module.exports=newgraphql.GraphQLSchema({

query:queryType

});

让我们现在看一下给我们一个JSON数据结果的js文件的代码:

vargraphql=require('graphql').graphql

varexpress=require('express')

vargraphQLHTTP=require('express-graphql')

varSchema=require('./schema')

varquery='query { todos { id, title, completed } }'

graphql(Schema,query).then(function(result){

console.log(JSON.stringify(result));

// Prints

// {

// "data":{

// "todos":[

// {

// "id":1446412739542,

// "title":"Read emails",

// "completed":false

// },

// {

// "id":1446412740883,

// "title":"Buy orange",

// "completed":true

// }

// ]

// }

// }

});

varapp=express()

.use('/',graphQLHTTP({schema:Schema,pretty:true}))

.listen(8080,function(err){

console.log('GraphQL Server is now running on localhost:8080');

});

下面的代码提供了跟上面同样 的执行结果,cURL在本例中并非是强制执行来得到 更长远的优势 的。它只是一种不用在浏览器中击中例子来检索数据的方式 。请注意万一你是一个Windows 用户,你可以使用Windows的命令提示符来执行cURL例子,此外,这里你还可以找到好的资源来在你的系统里安装cURL.

$ curl-XPOST-H"Content-Type:application/graphql"-d'query { todos { title } }'http://localhost:8080

{

"data":{

"todos":[

{

"title":"Read emails"

},

{

"title":"Buy orange"

}

]

}

}

关于语法(schema)的一个重要的事情 ,自从它描述了用户可以使用的API,它就假定数据已经存储 了。数据存储和描述的方式是一种实现细节。

React

React是由Facebook和Instagram来开发 的一种用来创建用户界面 JavaScript 库。很多人会认为React是MVC模型中的V,官方文档中是这样规定的:

我们做出React是为了解决一个问题:创建大型应用时,加载数据超时。根源在于构建可重用的组件。实际上,本质就是构建组件库。

如果你需要一个React指南,你可以阅读下面的资料:

视频: React入门

React JS库概述

视频: 单向数据流概述

一个简单的React 组件

React 组件通过render()方法来获取输入数据并将返回结果渲染展示。这里是使用JSX(跟XML语法相似)的例子. JSX是一个非必须项。JSX是一种更像是XML的JavaScript 语法扩展,你可以使用React将简单的JSX语法转化。

输入数据可以通过this.props来向render()渲染的组件传值。下面是关于如何创建一个React 组件的简单的例子 并且在 CodePen中可用.

varApplication=React.createClass({

render:function(){

return

{this.props.text}

{this.props.id}

;

}

});

和适当的这些预编译的代码,这些未编译过的JavaScript代码由JSX编译器生成。

"use strict";

varApplication=React.createClass({

displayName:"Application",

render:functionrender(){

returnReact.createElement(

"div",

null,

this.props.text,

this.props.id

);

}

});

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180208B1AIDQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券