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

levy9527 發布于2019-08-22 11:10 / 1074人閱讀

摘要：分鐘學是一個系列，簡單暴力，包學包會。那怎么辦呢本章就教你非常簡單地實現擴展的。我們可以借鑒的的寫法，為的實例添加一些自己的方法。更重要的是，也會有的效果，上一個的輸出會成為下一個的輸入，便于組合。

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

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

請求攔截

封裝修改 client 的 api

apollo store 存儲細節
寫入 store 的失敗原因分析和解決方案

apollo 的很多 api 都丑得慘絕人寰，比如 readQuery 和 writeQuery，絕對會讓你寫很多垃圾代碼。
但你又不能去改源碼，給官方提了 pr 產品經理又等不起你。那怎么辦呢？

本章就教你非常簡單地實現擴展 client 的 api。

我們可以借鑒 Redux 的 enhancer 的寫法，為 apollo 的 client 實例添加一些自己的方法。

enhancers.js

const enhancers = [
    log,
];

export default function applyEnhancers(client) {
    // 更函數式的寫法是把 enhancers 也作為參數傳進來，但是我需要的 enhancer 比較少，做此精簡
    return enhancers.reduce(
        (result, enhancer) => enhancer(result),
        client
    );
}

// --- enhancers ---
function log(client) {
    client.log = (...args) => {
        console.log(...args);
    };

    return client;
}

enhancer 的本質就是接收一個 client，對其進行一些修改，再返回一個 client。所以對 client applyEnhancers 的結果還是一個 client。
這看起來和直接修改 client 沒區別，不過是把每一個修改，都多帶帶寫成一個 enhancer ，比起寫在一個巨型函數來說，這樣更便于維護。
更重要的是，applyEnhancers 也會有 pipe 的效果，上一個 enhancer 的輸出會成為下一個 enhancer 的輸入，便于組合。

然后我們只需要在前面的基礎上

createApolloCLient.js

import applyEnhancers from "./enhancers";

export default function createApolloCLient() {
    const client = ....; // 可以參看以前的章節查看詳細的代碼
    return applyEnhancers(client);
}

非常簡單吧！

在后面的章節里，你會看到我是如何使用 enhancer 封裝 readQuery + writeQuery 為一個 api 的。

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

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

21 分鐘學 apollo-client 系列：請求攔截和 FragmentMatcher

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

Eastboat 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 系列：apollo store 存儲細節

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

lavor 2019-08-22 11:10 評論0 收藏0
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 來獲取數據修改本...

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