成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單暴力！21 分鐘學(xué)會(huì) apollo-client + redux

rockswang / 1075人閱讀

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

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

NOTE: 閱讀過(guò)程中如果產(chǎn)生任何不適，請(qǐng)及時(shí)撥打 120 自行搶救，謝謝。
本系列的目標(biāo)： 簡(jiǎn)單

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

搭建 Apollo client 端，集成 redux

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

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

進(jìn)階

提供定制方案

請(qǐng)求攔截

封裝修改 client 的 api

apollo store 存儲(chǔ)細(xì)節(jié)

寫(xiě)入 store 的失敗原因分析和解決方案

前置技能

了解 React + Redux

了解 GraphQL 的基礎(chǔ)概念
對(duì)怎么寫(xiě) Query 等 GraphQL 基礎(chǔ)問(wèn)題不會(huì)提及，請(qǐng)查看官方文檔Queries and Mutations | GraphQL。

限定提示

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

背景

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

于是，我們就采用了 GraphQL 來(lái)解決這個(gè)問(wèn)題。

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

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

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

后來(lái)，后端決定只使用 GraphQL 的 query 功能，也就是只 GET，其它 http 動(dòng)作仍然走 RESTful api。

如果你的項(xiàng)目是全盤(pán)采用 GraphQL 的，下面的實(shí)踐分享可能不適合你，僅供參考。

client 端選型

GraphQL 總體還是比較前后端分離的，不強(qiáng)制你使用某一種 client 方案。從 awesome-graphql 這個(gè)庫(kù)，進(jìn)入我們視野的主要有兩個(gè)

Relay

Apollo

Relay

先說(shuō)說(shuō) Relay。
Relay 是官方出品和推薦的，也是默認(rèn)的配套方案。文檔和解決方案更齊全一點(diǎn)。

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

Apollo

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

事后來(lái)看，Apollo 的坑不少。而且最終 Apollo 與其說(shuō)是和 Redux 集成起來(lái)，不如說(shuō)是隔離開(kāi)來(lái)了，因?yàn)?Apollo 也相當(dāng)于多帶帶維護(hù)自己的一個(gè) store。這讓我反思是否最初使用 Relay 也會(huì)得到同樣甚至更好的結(jié)果。

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








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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91896.html

相關(guān)文章

  • 21 分鐘學(xué) apollo-client 系列：簡(jiǎn)單搭建

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

    ranwu 評(píng)論0 收藏0

  • 21 分鐘學(xué) apollo-client 系列：擴(kuò)展 ApolloClient 的 api

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

    levy9527 評(píng)論0 收藏0

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

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

    lavor 評(píng)論0 收藏0

  • 21 分鐘學(xué) apollo-client 系列：寫(xiě)入失敗的原因和解決方案

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

    Baoyuan 評(píng)論0 收藏0

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

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

    617035918 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<