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); //异常处理
});
}