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

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

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

本系列的目标:

简单

进阶

前置技能

  • 了解 React + Redux
  • 了解 GraphQL 的基础概念
    对怎么写 Query 等 GraphQL 基础问题不会提及,请查看官方文档Queries and Mutations | GraphQL

限定提示

  • 本方案目前仅使用了 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 的贼船,那么希望本系列文章能让你少采一点坑。

    原文作者:tinkgu
    原文地址: https://segmentfault.com/a/1190000011226068
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞