React Relay 实现

type RankType implements Node {
    typeId: ID!
    typeName: String
    siteId: Int
    state: Int
    createtime: DateTime
    id: ID!
    rankList(totalCount: Int): [Rank]
}

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
  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>);
  }}
/>

const gridCardBookTypesQuery = `
query gridCardBookTypesQuery($rootId: Int=0, $totalCount: Int=12){
    bookTypeList(parentTypeId: $rootId){
      typeId
      typeName
      children(totalCount: $totalCount){
        typeId
        typeName
        parentTypeId
      }
    }
  }
`

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