React Relay 实现
React客户端调用GraphQL
一、通过Relay框架中的QueryRenderer组件实现数据交互,有2点需要注意一下:
1.query的命名:
注意query前缀保持和js文件名一致,ex:
App.js 命名 AppRankTypeQuery
2.schema.graphql文件的编写
通过yarn run Relay预编译
注意保持各种type不缺失,ex:
type RankType implements Node {
typeId: ID!
typeName: String
siteId: Int
state: Int
createtime: DateTime
id: ID!
rankList(totalCount: Int): [Rank]
}
query语句:
const AppRankTypeQuery= graphql`
query AppRankTypeQuery($rankTypeId: ID = 1, $totalCount: Int, $withBookTypeName: Boolean = false, $withSummary: Boolean = false){
rankType(rankTypeId: $rankTypeId) {
typeId
typeName
rankList(totalCount: $totalCount) {
rankTypeId
book {
bookId
bookName
cover
banner
summary @include(if: $withSummary)
bookType @include(if: $withBookTypeName) {
typeName
}
author
}
sort
}
}
}
`
QueryRenderer实现
<QueryRenderer
environment={xenvironment}
query={appRankTypeQuery}
variables={{
totalCount: 4
}}
render={({error, props}) => {
if (error) {
console.log(error)
return <div>Error!</div>;
}
if (!props) {
return (<div>Loading</div>);
}
return (<div>props.data</div>);
}}
/>
二、通过fetch直接调用
query语句:
const gridCardBookTypesQuery = `
query gridCardBookTypesQuery($rootId: Int=0, $totalCount: Int=12){
bookTypeList(parentTypeId: $rootId){
typeId
typeName
children(totalCount: $totalCount){
typeId
typeName
parentTypeId
}
}
}
`
fetch实现:
componentDidMount() {
fetch('http://localhost:5000/graphql', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: gridCardBookTypesQuery,
variables: {
parentTypeId: this.props.typeId
}
}),
}).then(response => {
return response.json();
}).then((json) => {
this.setState({isLoading: false, value: json.data.bookTypeList});
}).catch(function(ex) {
console.log('request failed', ex); //异常处理
});
}
React Relay 实现的更多相关文章
- 一个很有趣的示例Spring Boot项目,使用Giraphe CMS和Spring Boot
6: 这是一个很有趣的示例Spring Boot项目,使用Giraphe CMS和Spring Boot. Giraphe是基于Spring Boot的CMS框架. https://github.co ...
- GraphQL
GraphQL 官方描述: GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时. GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地 ...
- Why GraphQL is Taking Over APIs
A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web ...
- Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- Facebook React完全解析
2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...
- 探索React生态圈
原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- [转] Initial Impressions on GraphQL & Relay
https://kadira.io/blog/graphql/initial-impression-on-relay-and-graphql http://graphql.org/blog/subsc ...
随机推荐
- iSCSI存储的3种连接方式
我们分析了iSCSI存储的系统结构,下面来看iSCSI是如何与服务器.工作站等主机设备来连接的,也就是我们如何建立一个iSCSI网络存储系统. iSCSI设备的主机接口一般默认都是IP接口,可以直接与 ...
- python中的异常处理机制
python中的异常处理 1.什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异 ...
- 【phonegap】下载文件
<!-- 打包的时候phonegap自己会添加这个文件--> <script type="text/javascript" charset="utf-8 ...
- XHTML1.0版本你知道么,跟html5版本有什么区别
XHTML 1.0 是 XML 风格的 HTML 4.01. XHTML 1.1 主要是初步进行了模块化. HTML5 是下一代 HTML,取代 HTML 4.01. W3C 原本确实计划用 XHTM ...
- 3.使用Maven构建Web项目
转自:https://blog.csdn.net/m261030956/article/details/46481837 从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个W ...
- GDB常用命令简介
1.启动调试程序 gdb 调试对象,例如gdb app 2.运行程序 run 或这简写为r 3.设置断点 有几种不同的方式 1)break line 2) break file:line 3) bre ...
- Sprint + mybatis 编写测试
今天使用Spring 和mybatis框架编写项目,写了个测试方法方便测试,之前因为一直报空指针,注入不了,所以简单记录一下,方便以后使用 root.xml <?xml version=&quo ...
- POJ3624(背包问题)
1.题目链接地址 http://poj.org/problem?id=3624 2.源代码 #include<iostream> using namespace std; #define ...
- Android剖析和运行机制
Android剖析和运行机制 大纲: 1. Android剖析 Linux内核本地库(Native Libraries)Android运行时(Android Runtime)应用框架 2. Andro ...
- spring quartz 配置多个定时任务
1.配置文件-quartz-1.7.3jar spring版本为3.1.3jar <?xml version="1.0" encoding="UTF-8&quo ...