简单暴力!21 分钟学会 apollo-client + redux

apollo-client一个比较难用的 GraphQL 客户端,本系列带你集成 redux,趟平深坑,钻入原理,让你在 21 分钟内学完 apollo-client。

NOTE: 阅读过程中如果产生任何不适,请及时拨打 120 自行抢救,谢谢。

本系列的目标:

简单

进阶

前置技能

限定提示

  • 本方案目前仅使用了 Query 功能,不涉及 Mutation

背景

我司本来采用 RESTful api,但是完全遵循 RESTful 以来,随着业务不断扩展,api endpoint 简直多到爆炸。
对于前端来说,api 太多也难以维护,尤其是设计初期没有提前介入,会导致返回类似的 model,其 Schema 可能不同,这种不一致导致了很多脏代码的产生;
后端也懒于一遍遍地提供类似的接口。

于是,我们就采用了 GraphQL解决这个问题。

这里要跟大家明确下我们的项目背景,在采用 GraphQL 前:

  • 后端已经基于 RESTful api 搭建了一套很完善的工作流,GraphQL 必须要与 RESTful 共存
  • 前端基于 Redux + redux-saga + Immutable.js,并做了不少定制化,引入 GraphQL 必须要与之前的数据存储方案不冲突

后来,后端决定只使用 GraphQL 的 query 功能,也就是只 GET,其它 http 动作仍然走 RESTful api。

如果你的项目是全盘采用 GraphQL 的,下面的实践分享可能不适合你,仅供参考。

client 端选型

GraphQL 总体还是比较前后端分离的,不强制你使用某一种 client 方案。从 awesome-graphql 这个库,进入我们视野的主要有两个

  • Relay
  • Apollo

Relay

先说说 Relay。
Relay 是官方出品和推荐的,也是认的配套方案。文档和解决方案更齐全一点。

我粗略扫了一下 Relay 的文档,从它提供的 api 推测,Relay 不仅仅处理 GraphQL,还接管了状态管理等等,理论上用了 Relay 可以不用 Flux 、Redux 了。
考虑到可能和我们现存的 Redux 方案可能冲突,就放弃了。

Apollo

然后是 Apollo。
Apollo 在 github 上 star 也不少,文档乍看也还不错,除 React 外还适配多个框架。
而且有专门提到和 Redux 集成的章节:Integrating with Redux | Apollo React Docs
时间紧迫,没有想那么多,我就用了(手动捂脸哭)。

事后来看,Apollo 的坑不少。而且最终 Apollo 与其说是和 Redux 集成起来,不如说是隔离开来了,因为 Apollo 也相当于单独维护自己的一个 store。这让我反思是否最初使用 Relay 也会得到同样甚至更好的结果。

不管怎么说,如果你也上了 apollo-client 的贼船,那么希望本系列文章能让你少采一点坑。

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...