資訊專欄INFORMATION COLUMN
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。內(nèi)部通過自己的私有沒有暴露給開發(fā)者來更新這個(gè)。相當(dāng)于這個(gè)就是自己維護(hù)的，它將所有通過得到的數(shù)據(jù)保存在這里。的生成規(guī)則根據(jù)官方文檔的說法，在創(chuàng)建時(shí)，可選設(shè)置。如果不存在，則可能出現(xiàn)。
Apollo 集成 Redux 的原理21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。
搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數(shù)據(jù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案請(qǐng)求攔截
封裝修改 client 的 api
apollo store 存儲(chǔ)細(xì)節(jié)寫入 store 的失敗原因分析和解決方案
Apollo 僅僅是在 Redux 下開辟了一個(gè) reducer，比如就叫 apollo。apollo 內(nèi)部通過自己的私有 action （沒有暴露給開發(fā)者）來更新這個(gè) reducer 。
相當(dāng)于這個(gè) reducer 就是 Apollo 自己維護(hù)的 store ，它將所有通過 GraphQL query 得到的數(shù)據(jù)保存在這里。
我們只能通過以下幾種辦法來修改 apollo store
query 成功后，通過 updateQuery 回調(diào)修改 store
幾個(gè)有限的命令式接口
Mutation
第二種方式，雖然接口是命令式的，但并不是直接修改 state 的值，背后本質(zhì)是在調(diào)用它內(nèi)部私有的 action ，最終還是以 dispatch 的形式修改 store。只是這個(gè)過程對(duì)開發(fā)者是屏蔽的。
當(dāng)然你必須提供對(duì)應(yīng)的 GraphQL Schema （一段用 gql 語法描述的 query 或 fragment），最終的數(shù)據(jù)結(jié)構(gòu)如果不符合 Schema ，會(huì) 靜默 失敗。
更具體的解釋和運(yùn)用，看 修改本地的 apollo store 數(shù)據(jù) 一節(jié)。
可能你會(huì)問，既然 Apollo 的 store 是存在 redux 的 store 中的，自己寫 reducer 去改不就好了嗎？
這很容易想到，但不容易實(shí)現(xiàn)。
我們看看 apollo store 中數(shù)據(jù)存儲(chǔ)的結(jié)構(gòu)：
很像 normalizr 對(duì)不對(duì)？
簡(jiǎn)單說，apollo store 中存儲(chǔ)的是扁平化的緩存。
當(dāng)你想要直接修改 reducer 數(shù)據(jù)時(shí)，你需要
手動(dòng)計(jì)算出對(duì)應(yīng)想去修改的 reducer 的 key
當(dāng)需要處理一個(gè)多層嵌套的實(shí)體時(shí)，還需要根據(jù)其嵌套的其它 __typename 找出其它嵌套的 reducer。這個(gè)過程也是遞歸的。
所以，手動(dòng)寫 reducer 去更新 apollo store 會(huì)相當(dāng)麻煩。
扁平化數(shù)據(jù)展開來說的話，Apollo 和 normalizr 之類的數(shù)據(jù)扁平化方案一樣，只是一切都被自動(dòng)化了，省去了你用 normalizr 手寫的體力活，算是為數(shù)不多的驚喜了。
如果你沒有接觸過 normalizr ，那硬要用 reducer 的術(shù)語來描述的話，我們可以把 apollo 這個(gè) reducer 視為一個(gè) store。
在這個(gè) store 中， 每一個(gè)存入 store 的實(shí)體都以 __typename:id 的方式多帶帶存放到一個(gè) reducer 中，__typename 取自于你請(qǐng)求時(shí)使用的 GraphQL Schema，如 UserTimeline:260。
如果你從后端接收到一組 UserTimeline ，那么其中每一項(xiàng)都會(huì)在 store 里注冊(cè)一個(gè) reducer ，可能會(huì)出現(xiàn) UserTimeline:1 ~ UserTimeline:100 的盛景。當(dāng)你在別的請(qǐng)求中再請(qǐng)求到 UserTimeline:260 的時(shí)候，就直接 merge 到原有的 reducer 中。
你可能說這樣很好啊，直接根據(jù)這個(gè) key 訪問對(duì)應(yīng)的 state 就可以了。但問題是，凡是嵌套結(jié)構(gòu)，都會(huì)被抽出來多帶帶作為一個(gè) reducer。
比方說，上圖中 UserTimeline 包含一個(gè) userInfo， 它的 __typename 是 UserInfo，那么 UserTimeline:260 下的 userInfo 中存儲(chǔ)只是對(duì)應(yīng)的 reducer 索引，形如
{ id: "UserInfo:1004", generated: false, ...}
真實(shí)的 UserTimeline:260.userInfo 存儲(chǔ)在一個(gè)名為 UserInfo:1004 的 reducer 中。而 UserInfo:1004 可能也并不完整，因?yàn)樗鼉?nèi)部也可能存在嵌套，也需要經(jīng)歷這樣的一次搜尋過程。要一直遞歸下去，我們才能得到最終的完整數(shù)據(jù)。
id 的生成規(guī)則Updating the Store | Apollo React Docs
根據(jù)官方文檔的說法，apollo 在創(chuàng)建 apollo client 時(shí)，可選設(shè)置 dataIdFromObject。
const client = new ApolloClient({
networkInterface,
dataIdFromObject: x => `${x.__typename}:${x.id}`,
});
如果不設(shè)置 dataIdFromObject ，其默認(rèn)就是 ${x.__typename}:${x.id} 。
如果 x 不存在 id，則可能出現(xiàn) ${__typename}:${id}.${property}.${subProperty} 。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91920.html
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。搭建端，集成使用來獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請(qǐng)求攔截封裝修改的存儲(chǔ)細(xì)節(jié)寫入的失敗原因分析和解決方案修改本地?cái)?shù)據(jù)之前我們已經(jīng)知道，我們可以在請(qǐng)求結(jié)束之后，通過自動(dòng)執(zhí)行的回調(diào)，修改。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-clien...
摘要：分鐘學(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 來獲取數(shù)據(jù)...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。一旦你丟失了，可能會(huì)導(dǎo)致寫入失敗，或者盡管寫入了，但本該攜帶的那一層的數(shù)據(jù)沒有寫入。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 apollo store 數(shù)據(jù)提供定制方案 請(qǐng)求攔截 封裝修改 clie...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。那怎么辦呢本章就教你非常簡(jiǎn)單地實(shí)現(xiàn)擴(kuò)展的。我們可以借鑒的的寫法，為的實(shí)例添加一些自己的方法。更重要的是，也會(huì)有的效果，上一個(gè)的輸出會(huì)成為下一個(gè)的輸入，便于組合。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 ...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。接管了請(qǐng)求和狀態(tài)管理。一般在生產(chǎn)環(huán)境中，我們通常還希望做權(quán)限驗(yàn)證請(qǐng)求攔截等事務(wù)處理。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 apollo store 數(shù)據(jù)提供定制方案 請(qǐng)求攔截 封裝修改 clie...
閱讀 990·2021-10-25 09:48
閱讀 691·2021-08-23 09:45
閱讀 2548·2019-08-30 15:53
閱讀 1803·2019-08-30 12:45
閱讀 729·2019-08-29 17:21
閱讀 3543·2019-08-27 10:56
閱讀 2605·2019-08-26 13:48
閱讀 752·2019-08-26 12:24
