react-relay的探索历程

Author Avatar
Peipei Wong 7月 22, 2017
  • 在其它设备中阅读本文章

上次写感想还是2014的时候,那个时候是老师布置的作业(尴尬)
队长看到GraphQL很好,于是先拿一个功能来试手😊。
前端要使用GraphQL,最简单的方法是使用ajax发送query字符串。这个方法,若query嵌套层级太深,会导致query很长,长的让人接受不了;再者,假如数据变化,需要你手动的去改变DOM。项目中使用了react,于是队长给推荐了react-relay来配合GraphQL。
首先给的时间是看GraphQL和react-relay的文档,先瞄一眼relay的文档,感觉是层层嵌套,就先去看GraphQL的文档,relay的文档没有看完…😶

第一天

开始在队长的鼓励下开始写relay,到了relay的官网上,看到有一个Demo,就把代码给copy下来,再根据文档理解了代码的意思,就开始尝试着写代码。写代码的过程有点别扭,刚开始接触,会犯一些错误。但是又不知道错误发生的原因,于是就开始google解决。也想吐槽一下文档,文档上说,fragment的name建议是fileName_propsName,于是为了名字短点,就全部改了,结果编译的时候,告诉我是must be。😢
代码终于不报错了,但是需要一个schema的文件。我想手写schema太繁琐了,也是去查有没有自动生成schema的插件,但是很遗憾,我找到都是配合node使用的(假如你有好的插件,请推荐给我,谢谢)。找啊找,找啊找,也没找到合适的,最终是队长上网找了一个工具生成的🤗。schema的问题解决。schema的存在是为了映射fragment的type。
这个时候,大哥过来问问我怎么样了,我告诉他,虽然安装了react-relay,可是文档上的方法不存在,我就很暴力的改了源码,将方法暴露出来。他告诉我relay现在有两个版本:classic和modern,modern是最新的。我弱弱的问一句,咱们用哪个版本,他说当然是最新的。我的内心在哭泣😭。既然只是版本的迭代,思想肯定没有太大的变化,于是打起精神来看文档。👉这里是我太心急了,直接看了Demo,就ctrl+f去直接搜方法了,没有整体的先浏览一下文档,要不然也不会有这个不可预料的情况。

第二天

边看文档,边改我的代码。👉刚开始报错是“没有配置babel或者graphql写错了”,假如你的babel配置是按照文档来的,那最有可能的就是你的fragment或者query写错了。最简单的query可以正常的渲染出来了,因为是query中需要有参数,所以开始看如何使用参数。在查资料的时候,这个链接给了我很大的帮助。但是在这个过程中,下面的错误伴随了我十个小时,我一直在尝试解决这个错误,于是上网查啊查 查啊查 查啊查

也没找到答案

第三天

大哥说他写出来了,我看了他的代码,对比我的代码,唯一的不同是,我将edges和node要写在不同的fragment中。我尝试在正确的代码上改成我设计的fragment,功能就报错了。我意识到,需要将edges和node写在同一个fragment中。👉出现这个错误的原因是,我已经封装好的fragment,出现这个错误,我全部的心思都放在了index.js,没有检查我封装好的组件。假如再来一次,我也会被困在这个error上出不来。之后因为还有一个加载更多的动作,于是我开始完成这个功能,在这个过程中,我学会了react父子组件如何传递消息。

测试

功能完成好了。但是在进行测试的时候,再看network时,加载更多这个按钮是通过first这个参数来进行请求数据,first的意思就是取前first数据,后端限制first只能取到50,即使可以取到1000,但是在网络上传输1000条数据,也是一笔庞大的负担。relay也提供了分页的container,但是没有研究出来是怎样使用的。于是relay需要更换….所以,没有一个很好的方式来解决这个问题。👉队长又给推荐了Apollo,接下来要去看Apollo了
待续…