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

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 的。