摘要：阅读过程中如果产生任何不适，请及时拨打自行抢救，谢谢。端选型总体还是比较前后端分离的，不强制你使用某一种方案。是官方出品和推荐的，也是默认的配套方案。事后来看，的坑不少。
apollo-client 是一个比较难用的 GraphQL 客户端，本系列带你集成 redux，趟平深坑，钻入原理，让你在 21 分钟内学完 apollo-client。
本系列的目标： 简单NOTE: 阅读过程中如果产生任何不适，请及时拨打 120 自行抢救，谢谢。
选型建议（是否值得使用 apollo-client）
搭建 Apollo client 端，集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo store 数据
进阶
提供定制方案
请求拦截
封装修改 client 的 api
apollo store 存储细节
写入 store 的失败原因分析和解决方案
前置技能了解 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 在 github 上 star 也不少，文档乍看也还不错，除 React 外还适配多个框架。
而且有专门提到和 Redux 集成的章节：Integrating with Redux | Apollo React Docs。
时间紧迫，没有想那么多，我就用了（手动捂脸哭）。
事后来看，Apollo 的坑不少。而且最终 Apollo 与其说是和 Redux 集成起来，不如说是隔离开来了，因为 Apollo 也相当于多带带维护自己的一个 store。这让我反思是否最初使用 Relay 也会得到同样甚至更好的结果。
不管怎么说，如果你也上了 apollo-client 的贼船，那么希望本系列文章能让你少采一点坑。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91896.html
摘要：分钟学是一个系列，简单暴力，包学包会。其中提到了等需要后端配合的东西，徒增了配置的复杂性。如果不行，再跟随我的简单步骤试试。环境要求请确保你已经搭建了自己的环境下文在行号前添加表示删除的原代码，表示新增的代码。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。 搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据...
摘要：分钟学是一个系列，简单暴力，包学包会。那怎么办呢本章就教你非常简单地实现扩展的。我们可以借鉴的的写法，为的实例添加一些自己的方法。更重要的是，也会有的效果，上一个的输出会成为下一个的输入，便于组合。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。 搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本地的 ...
摘要：分钟学是一个系列，简单暴力，包学包会。内部通过自己的私有没有暴露给开发者来更新这个。相当于这个就是自己维护的，它将所有通过得到的数据保存在这里。的生成规则根据官方文档的说法，在创建时，可选设置。如果不存在，则可能出现。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。 搭建 Apollo client 端，集成 redux使用 apollo-client 来...
摘要：分钟学是一个系列，简单暴力，包学包会。一旦你丢失了，可能会导致写入失败，或者尽管写入了，但本该携带的那一层的数据没有写入。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。 搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本地的 apollo store 数据提供定制方案 请求拦截 封装修改 clie...
摘要：分钟学是一个系列，简单暴力，包学包会。搭建端，集成使用来获取数据修改本地的数据提供定制方案请求拦截封装修改的存储细节写入的失败原因分析和解决方案修改本地数据之前我们已经知道，我们可以在请求结束之后，通过自动执行的回调，修改。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。 搭建 Apollo client 端，集成 redux使用 apollo-clien...
阅读 955·2023-04-25 23:54
阅读 3036·2021-11-08 13:21
阅读 3758·2021-09-27 13:35
阅读 3380·2021-07-26 23:41
阅读 1042·2019-08-30 15:52
阅读 3431·2019-08-30 11:27
阅读 2087·2019-08-29 18:37
阅读 528·2019-08-29 17:24
