資訊專欄INFORMATION COLUMN
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。那怎么辦呢本章就教你非常簡單地實現(xiàn)擴(kuò)展的。我們可以借鑒的的寫法，為的實例添加一些自己的方法。更重要的是，也會有的效果，上一個的輸出會成為下一個的輸入，便于組合。
21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。
搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數(shù)據(jù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案請求攔截
封裝修改 client 的 api
apollo store 存儲細(xì)節(jié)
寫入 store 的失敗原因分析和解決方案
apollo 的很多 api 都丑得慘絕人寰，比如 readQuery 和 writeQuery，絕對會讓你寫很多垃圾代碼。
但你又不能去改源碼，給官方提了 pr 產(chǎn)品經(jīng)理又等不起你。那怎么辦呢？
本章就教你非常簡單地實現(xiàn)擴(kuò)展 client 的 api。
我們可以借鑒 Redux 的 enhancer 的寫法，為 apollo 的 client 實例添加一些自己的方法。
enhancers.js
const enhancers = [
log,
];
export default function applyEnhancers(client) {
// 更函數(shù)式的寫法是把 enhancers 也作為參數(shù)傳進(jìn)來，但是我需要的 enhancer 比較少，做此精簡
return enhancers.reduce(
(result, enhancer) => enhancer(result),
client
);
}
// --- enhancers ---
function log(client) {
client.log = (...args) => {
console.log(...args);
};
return client;
}
enhancer 的本質(zhì)就是接收一個 client，對其進(jìn)行一些修改，再返回一個 client。所以對 client applyEnhancers 的結(jié)果還是一個 client。
這看起來和直接修改 client 沒區(qū)別，不過是把每一個修改，都多帶帶寫成一個 enhancer ，比起寫在一個巨型函數(shù)來說，這樣更便于維護(hù)。
更重要的是，applyEnhancers 也會有 pipe 的效果，上一個 enhancer 的輸出會成為下一個 enhancer 的輸入，便于組合。
然后我們只需要在前面的基礎(chǔ)上
createApolloCLient.js
import applyEnhancers from "./enhancers";
export default function createApolloCLient() {
const client = ....; // 可以參看以前的章節(jié)查看詳細(xì)的代碼
return applyEnhancers(client);
}
非常簡單吧！
在后面的章節(jié)里，你會看到我是如何使用 enhancer 封裝 readQuery + writeQuery 為一個 api 的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91922.html
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。接管了請求和狀態(tài)管理。一般在生產(chǎn)環(huán)境中，我們通常還希望做權(quán)限驗證請求攔截等事務(wù)處理。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 apollo store 數(shù)據(jù)提供定制方案 請求攔截 封裝修改 clie...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。其中提到了等需要后端配合的東西，徒增了配置的復(fù)雜性。如果不行，再跟隨我的簡單步驟試試。環(huán)境要求請確保你已經(jīng)搭建了自己的環(huán)境下文在行號前添加表示刪除的原代碼，表示新增的代碼。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。內(nèi)部通過自己的私有沒有暴露給開發(fā)者來更新這個。相當(dāng)于這個就是自己維護(hù)的，它將所有通過得到的數(shù)據(jù)保存在這里。的生成規(guī)則根據(jù)官方文檔的說法，在創(chuàng)建時，可選設(shè)置。如果不存在，則可能出現(xiàn)。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。搭建端，集成使用來獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請求攔截封裝修改的存儲細(xì)節(jié)寫入的失敗原因分析和解決方案修改本地數(shù)據(jù)之前我們已經(jīng)知道，我們可以在請求結(jié)束之后，通過自動執(zhí)行的回調(diào)，修改。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-clien...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。一旦組件掛載后，會自動進(jìn)行數(shù)據(jù)請求，前提是客戶端提供的和后端的相符。如果回調(diào)返回直接不作請求。在組件內(nèi)進(jìn)行分頁請求之前提到了，這個裝飾器為添加了對象，其中有個函數(shù)為。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本...
閱讀 3050·2021-11-24 09:39
閱讀 2305·2021-10-08 10:05
閱讀 2830·2021-09-24 13:52
閱讀 1608·2021-09-22 15:07
閱讀 622·2019-08-30 15:55
閱讀 1839·2019-08-30 15:53
閱讀 720·2019-08-30 15:44
閱讀 3154·2019-08-30 11:20
