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

levy9527 发布于2019-08-22 11:10 / 1026人阅读

摘要：分钟学是一个系列，简单暴力，包学包会。那怎么办呢本章就教你非常简单地实现扩展的。我们可以借鉴的的写法，为的实例添加一些自己的方法。更重要的是，也会有的效果，上一个的输出会成为下一个的输入，便于组合。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91922.html

21 分钟学 apollo-client 系列：请求拦截和 FragmentMatcher

摘要：分钟学是一个系列，简单暴力，包学包会。接管了请求和状态管理。一般在生产环境中，我们通常还希望做权限验证请求拦截等事务处理。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本地的 apollo store 数据提供定制方案请求拦截封装修改 clie...

Eastboat 2019-08-22 11:10 评论0 收藏0
21 分钟学 apollo-client 系列：简单搭建

摘要：分钟学是一个系列，简单暴力，包学包会。其中提到了等需要后端配合的东西，徒增了配置的复杂性。如果不行，再跟随我的简单步骤试试。环境要求请确保你已经搭建了自己的环境下文在行号前添加表示删除的原代码，表示新增的代码。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据...

ranwu 2019-08-22 11:09 评论0 收藏0
21 分钟学 apollo-client 系列：apollo store 存储细节

摘要：分钟学是一个系列，简单暴力，包学包会。内部通过自己的私有没有暴露给开发者来更新这个。相当于这个就是自己维护的，它将所有通过得到的数据保存在这里。的生成规则根据官方文档的说法，在创建时，可选设置。如果不存在，则可能出现。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来...

lavor 2019-08-22 11:10 评论0 收藏0
21 分钟学 apollo-client 系列：修改本地 store 数据

摘要：分钟学是一个系列，简单暴力，包学包会。搭建端，集成使用来获取数据修改本地的数据提供定制方案请求拦截封装修改的存储细节写入的失败原因分析和解决方案修改本地数据之前我们已经知道，我们可以在请求结束之后，通过自动执行的回调，修改。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-clien...

617035918 2019-08-22 11:10 评论0 收藏0
21 分钟学 apollo-client 系列：获取数据

摘要：分钟学是一个系列，简单暴力，包学包会。一旦组件挂载后，会自动进行数据请求，前提是客户端提供的和后端的相符。如果回调返回直接不作请求。在组件内进行分页请求之前提到了，这个装饰器为添加了对象，其中有个函数为。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本...

robin 2019-08-22 11:10 评论0 收藏0