React Relay 实现

Posted 2020-10-25 Kuai Jiajin

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