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