专栏首页家劲React Relay 实现

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 单元测试 增强系统健壮性

    1.JulyNovel需要在request_url插入spider.wait队列之前去判断有没有必要去爬这条url

    从今若
  • MariaDB 一些SQL语句的执行

    形如: '丹药|练功流|轻松|学生|学院风' 查询结果:'10|35|36|40'

    从今若
  • iOS 开发之路(使用WKWebView加载Html5) 四

      基于Swift 3 、 Xcode 8 、 iOS 10 下的WKWebView的使用。

    从今若
  • 注解@RequestParam与@RequestBody的使用场景

    一直有这么一个疑问:在使用postman工具测试api接口的时候,如何使用 json 字符串传值呢,而不是使用 x-www-form-urlencoded 类型...

    create17
  • 快速学习-Http客户端工具

    既然微服务选择了Http,那么我们就需要考虑自己来实现对请求和响应的处理。不过开源世界已经有很多的http客户端工具,能够帮助我们做这些事情,例如:

    cwl_java
  • Python读写Excel表格,就是这么

    于是我到处查找资料,基本解决了日常所需,终于算是完成了任务,因此撰写此文就算是总结吧,主要记录使用过程的常见问题及解决。

    用户2398817
  • 配置Sublime Text工具运行JavaScript代码

        SublimeText是一款及强大的跨平台编辑器,其丰富的插件可以帮助开发者编写各种语言的代码。并且其自带控制台,开发者实现简单的配置即可在Sublim...

    珲少
  • session跟踪失效的问题和分析(57天)

    最近碰到一个奇怪的问题,在生产和其他比较正式的环境中进行sql trace都没问题,但就是测试环境的数据库不知道怎么的, 设置sql_trace,开启诊断事件,...

    jeanron100
  • 火币网更名、OKEX公号被封,晚间回应称与监管无关 | 热点

    镁客网
  • GlidedSky 字体加密1

    还是这个网站,字体加密1, 不过这个 1 比较简单。我会写的很详细,大佬轻喷,内容适合新手小白看,也是自己记录一下,方便自己理解查看。

    andrew_a

扫码关注云+社区

领取腾讯云代金券