React Relay 实现

Posted Kuai Jiajin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 实现的主要内容,如果未能解决你的问题,请参考以下文章

使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由

从 Relay 中的动态组件获取片段

Relay Modern 节点不包含片段属性

从外部存储中检索 Relay 查询片段的变量

react-router-relay 是不是与 Relay 模式不一致?

使用 Relay.setVariables 保留 React 组件状态