21 分钟学 apollo-client 是一个系列,简单暴力,包学包会。
搭建 Apollo client 端,集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo 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 的。