21 分鐘學 apollo-client 系列：apollo store 存儲細節

lavor 發布于2019-08-22 11:10 / 1043人閱讀

摘要：分鐘學是一個系列，簡單暴力，包學包會。內部通過自己的私有沒有暴露給開發者來更新這個。相當于這個就是自己維護的，它將所有通過得到的數據保存在這里。的生成規則根據官方文檔的說法，在創建時，可選設置。如果不存在，則可能出現。

21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。

搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數據
修改本地的 apollo store 數據
提供定制方案

請求攔截

封裝修改 client 的 api
apollo store 存儲細節

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

Apollo 集成 Redux 的原理

Apollo 僅僅是在 Redux 下開辟了一個 reducer，比如就叫 apollo。apollo 內部通過自己的私有 action （沒有暴露給開發者）來更新這個 reducer 。
相當于這個 reducer 就是 Apollo 自己維護的 store ，它將所有通過 GraphQL query 得到的數據保存在這里。

我們只能通過以下幾種辦法來修改 apollo store

query 成功后，通過 updateQuery 回調修改 store

幾個有限的命令式接口

Mutation

第二種方式，雖然接口是命令式的，但并不是直接修改 state 的值，背后本質是在調用它內部私有的 action ，最終還是以 dispatch 的形式修改 store。只是這個過程對開發者是屏蔽的。
當然你必須提供對應的 GraphQL Schema （一段用 gql 語法描述的 query 或 fragment），最終的數據結構如果不符合 Schema ，會靜默失敗。
更具體的解釋和運用，看修改本地的 apollo store 數據一節。

Apollo 的數據存儲

可能你會問，既然 Apollo 的 store 是存在 redux 的 store 中的，自己寫 reducer 去改不就好了嗎？
這很容易想到，但不容易實現。

我們看看 apollo store 中數據存儲的結構：

很像 normalizr 對不對？

簡單說，apollo store 中存儲的是扁平化的緩存。

當你想要直接修改 reducer 數據時，你需要

手動計算出對應想去修改的 reducer 的 key

當需要處理一個多層嵌套的實體時，還需要根據其嵌套的其它 __typename 找出其它嵌套的 reducer。這個過程也是遞歸的。

所以，手動寫 reducer 去更新 apollo store 會相當麻煩。

扁平化數據

展開來說的話，Apollo 和 normalizr 之類的數據扁平化方案一樣，只是一切都被自動化了，省去了你用 normalizr 手寫的體力活，算是為數不多的驚喜了。

如果你沒有接觸過 normalizr ，那硬要用 reducer 的術語來描述的話，我們可以把 apollo 這個 reducer 視為一個 store。
在這個 store 中，每一個存入 store 的實體都以 __typename:id 的方式多帶帶存放到一個 reducer 中，__typename 取自于你請求時使用的 GraphQL Schema，如 UserTimeline:260。
如果你從后端接收到一組 UserTimeline ，那么其中每一項都會在 store 里注冊一個 reducer ，可能會出現 UserTimeline:1 ~ UserTimeline:100 的盛景。當你在別的請求中再請求到 UserTimeline:260 的時候，就直接 merge 到原有的 reducer 中。

你可能說這樣很好啊，直接根據這個 key 訪問對應的 state 就可以了。但問題是，凡是嵌套結構，都會被抽出來多帶帶作為一個 reducer。
比方說，上圖中 UserTimeline 包含一個 userInfo，它的 __typename 是 UserInfo，那么 UserTimeline:260 下的 userInfo 中存儲只是對應的 reducer 索引，形如

{ id: "UserInfo:1004", generated: false, ...}

真實的 UserTimeline:260.userInfo 存儲在一個名為 UserInfo:1004 的 reducer 中。而 UserInfo:1004 可能也并不完整，因為它內部也可能存在嵌套，也需要經歷這樣的一次搜尋過程。要一直遞歸下去，我們才能得到最終的完整數據。

id 的生成規則

Updating the Store | Apollo React Docs

根據官方文檔的說法，apollo 在創建 apollo client 時，可選設置 dataIdFromObject。

const client = new ApolloClient({
    networkInterface,
    dataIdFromObject: x => `${x.__typename}:${x.id}`,
});

如果不設置 dataIdFromObject ，其默認就是 ${x.__typename}:${x.id} 。
如果 x 不存在 id，則可能出現 ${__typename}:${id}.${property}.${subProperty} 。

GPU云服務器云服務器海量存儲系列戴爾系列服務器云存儲空間 d-fusion 5000系列統一存儲系統 Apollo

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91920.html

21 分鐘學 apollo-client 系列：修改本地 store 數據

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

617035918 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：簡單搭建

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

ranwu 2019-08-22 11:09 評論0 收藏0
21 分鐘學 apollo-client 系列：寫入失敗的原因和解決方案

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

Baoyuan 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：擴展 ApolloClient 的 api

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

levy9527 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：請求攔截和 FragmentMatcher

摘要：分鐘學是一個系列，簡單暴力，包學包會。接管了請求和狀態管理。一般在生產環境中，我們通常還希望做權限驗證請求攔截等事務處理。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數據修改本地的 apollo store 數據提供定制方案請求攔截封裝修改 clie...

Eastboat 2019-08-22 11:10 評論0 收藏0