亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡單暴力！21 分鐘學會 apollo-client + redux

rockswang / 1121人閱讀

摘要：閱讀過程中如果產(chǎn)生任何不適，請及時撥打自行搶救，謝謝。端選型總體還是比較前后端分離的，不強制你使用某一種方案。是官方出品和推薦的，也是默認的配套方案。事后來看，的坑不少。

apollo-client 是一個比較難用的 GraphQL 客戶端，本系列帶你集成 redux，趟平深坑，鉆入原理，讓你在 21 分鐘內(nèi)學完 apollo-client。

NOTE: 閱讀過程中如果產(chǎn)生任何不適，請及時撥打 120 自行搶救，謝謝。
本系列的目標： 簡單

選型建議（是否值得使用 apollo-client）

搭建 Apollo client 端，集成 redux

使用 apollo-client 來獲取數(shù)據(jù)

修改本地的 apollo store 數(shù)據(jù)

進階

提供定制方案

請求攔截

封裝修改 client 的 api

apollo store 存儲細節(jié)

寫入 store 的失敗原因分析和解決方案

前置技能

了解 React + Redux

了解 GraphQL 的基礎(chǔ)概念
對怎么寫 Query 等 GraphQL 基礎(chǔ)問題不會提及，請查看官方文檔Queries and Mutations | GraphQL。

限定提示

本方案目前僅使用了 Query 功能，不涉及 Mutation

背景

我司本來采用 RESTful api，但是完全遵循 RESTful 以來，隨著業(yè)務不斷擴展，api endpoint 簡直多到爆炸。
對于前端來說，api 太多也難以維護，尤其是設(shè)計初期沒有提前介入，會導致返回類似的 model，其 Schema 可能不同，這種不一致導致了很多臟代碼的產(chǎn)生；
后端也懶于一遍遍地提供類似的接口。

于是，我們就采用了 GraphQL 來解決這個問題。

這里要跟大家明確下我們的項目背景，在采用 GraphQL 前：

后端已經(jīng)基于 RESTful api 搭建了一套很完善的工作流，GraphQL 必須要與 RESTful 共存

前端基于 Redux + redux-saga + Immutable.js，并做了不少定制化，引入 GraphQL 必須要與之前的數(shù)據(jù)存儲方案不沖突

后來，后端決定只使用 GraphQL 的 query 功能，也就是只 GET，其它 http 動作仍然走 RESTful api。

如果你的項目是全盤采用 GraphQL 的，下面的實踐分享可能不適合你，僅供參考。

client 端選型

GraphQL 總體還是比較前后端分離的，不強制你使用某一種 client 方案。從 awesome-graphql 這個庫，進入我們視野的主要有兩個

Relay

Apollo

Relay

先說說 Relay。
Relay 是官方出品和推薦的，也是默認的配套方案。文檔和解決方案更齊全一點。

我粗略掃了一下 Relay 的文檔，從它提供的 api 推測，Relay 不僅僅處理 GraphQL，還接管了狀態(tài)管理等等，理論上用了 Relay 可以不用 Flux 、Redux 了。
考慮到可能和我們現(xiàn)存的 Redux 方案可能沖突，就放棄了。

Apollo

然后是 Apollo。
Apollo 在 github 上 star 也不少，文檔乍看也還不錯，除 React 外還適配多個框架。
而且有專門提到和 Redux 集成的章節(jié)：Integrating with Redux | Apollo React Docs。
時間緊迫，沒有想那么多，我就用了（手動捂臉哭）。

事后來看，Apollo 的坑不少。而且最終 Apollo 與其說是和 Redux 集成起來，不如說是隔離開來了，因為 Apollo 也相當于多帶帶維護自己的一個 store。這讓我反思是否最初使用 Relay 也會得到同樣甚至更好的結(jié)果。

不管怎么說，如果你也上了 apollo-client 的賊船，那么希望本系列文章能讓你少采一點坑。








文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91896.html

相關(guān)文章

  • 21 分鐘學 apollo-client 系列：簡單搭建

    摘要：分鐘學是一個系列，簡單暴力，包學包會。其中提到了等需要后端配合的東西，徒增了配置的復雜性。如果不行，再跟隨我的簡單步驟試試。環(huán)境要求請確保你已經(jīng)搭建了自己的環(huán)境下文在行號前添加表示刪除的原代碼，表示新增的代碼。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)...

    ranwu 評論0 收藏0

  • 21 分鐘學 apollo-client 系列：擴展 ApolloClient 的 api

    摘要：分鐘學是一個系列，簡單暴力，包學包會。那怎么辦呢本章就教你非常簡單地實現(xiàn)擴展的。我們可以借鑒的的寫法，為的實例添加一些自己的方法。更重要的是，也會有的效果，上一個的輸出會成為下一個的輸入，便于組合。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 ...

    levy9527 評論0 收藏0

  • 21 分鐘學 apollo-client 系列：apollo store 存儲細節(jié)

    摘要：分鐘學是一個系列，簡單暴力，包學包會。內(nèi)部通過自己的私有沒有暴露給開發(fā)者來更新這個。相當于這個就是自己維護的，它將所有通過得到的數(shù)據(jù)保存在這里。的生成規(guī)則根據(jù)官方文檔的說法，在創(chuàng)建時，可選設(shè)置。如果不存在，則可能出現(xiàn)。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來...

    lavor 評論0 收藏0

  • 21 分鐘學 apollo-client 系列：寫入失敗的原因和解決方案

    摘要：分鐘學是一個系列，簡單暴力，包學包會。一旦你丟失了，可能會導致寫入失敗，或者盡管寫入了，但本該攜帶的那一層的數(shù)據(jù)沒有寫入。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 apollo store 數(shù)據(jù)提供定制方案 請求攔截 封裝修改 clie...

    Baoyuan 評論0 收藏0

  • 21 分鐘學 apollo-client 系列：修改本地 store 數(shù)據(jù)

    摘要：分鐘學是一個系列，簡單暴力，包學包會。搭建端，集成使用來獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請求攔截封裝修改的存儲細節(jié)寫入的失敗原因分析和解決方案修改本地數(shù)據(jù)之前我們已經(jīng)知道，我們可以在請求結(jié)束之后，通過自動執(zhí)行的回調(diào)，修改。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。 搭建 Apollo client 端，集成 redux使用 apollo-clien...

    617035918 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<