資訊專欄INFORMATION COLUMN
摘要：閱讀過程中如果產生任何不適，請及時撥打自行搶救，謝謝。端選型總體還是比較前后端分離的，不強制你使用某一種方案。是官方出品和推薦的，也是默認的配套方案。事后來看，的坑不少。
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 的賊船，那么希望本系列文章能讓你少采一點坑。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 959·2023-04-25 23:54
閱讀 3040·2021-11-08 13:21
閱讀 3762·2021-09-27 13:35
閱讀 3386·2021-07-26 23:41
閱讀 1049·2019-08-30 15:52
閱讀 3435·2019-08-30 11:27
閱讀 2094·2019-08-29 18:37
閱讀 535·2019-08-29 17:24
