21 分钟学 apollo-client 系列：扩展 ApolloClient 的 api

最新推荐文章于 2023-02-10 11:27:33 发布

weixin_33712881

最新推荐文章于 2023-02-10 11:27:33 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011226621

本文介绍如何在21分钟内快速掌握Apollo Client的使用，包括集成Redux、扩展API及解决常见问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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