21 分鐘學 apollo-client 系列:擴充套件 ApolloClient 的 api

tinkgu發表於2017-09-18

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

搭建 Apollo client 端,整合 redux
使用 apollo-client 來獲取資料
修改本地的 apollo store 資料
提供定製方案

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

apollo 的很多 api 都醜得慘絕人寰,比如 readQuerywriteQuery,絕對會讓你寫很多垃圾程式碼。
但你又不能去改原始碼,給官方提了 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 的。

相關文章