21 分钟学 apollo-client 系列：简单搭建

ranwu 发布于2019-08-22 11:09 / 3540人阅读

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

21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。

搭建 Apollo client 端，集成 redux
使用 apollo-client 来获取数据
修改本地的 apollo store 数据
提供定制方案

请求拦截

封装修改 client 的 api
apollo store 存储细节

写入 store 的失败原因分析和解决方案

在 Redux 基础上添加 Apollo 其它教程

Apollo 其实提供了示例仓库：

Small Example: Snack | Apollo React Docs

Full Example: GitHunt | Apollo React Docs

和 Redux 的集成也有这篇文章： Integrating with Redux | Apollo React Docs

说起来 GitHunt 这个库还蛮奇怪的，不同于其它教程一般把示例 repo 写得比较精简，这个 repo 搞了一堆东西来迷惑你。
其中提到了 persistgraphql 等需要后端配合的东西，徒增了配置的复杂性。

你可以先试试把上面的例子跑起来，毕竟代码比较全，也有助于你看懂我下一章节是如何进行封装的。
如果不行，再跟随我的简单步骤试试。

环境要求

请确保你已经搭建了自己的 Redux 环境

node >= 6.10

npm >= 3.10

react: 15 ~ 16

redux: 3.x

webpack: 2.x

下文在行号前添加 - 表示删除的原代码， + 表示新增的代码。

是的，就是从 git commit 里复制过来的

install package

npm i --save react-apollo
npm i --save-dev graphql-tag

NOTE: 最近官方出了 react-apollo 2.x，但本文使用 1.x。所以检查下你下载的版本是不是 1.x 的。

update webpack.config.js

增加对 .gql 文件的支持

// ...
extensions: [".web.js", ".js", ".jsx", ".gql", "graphql"],
// ...

module: {
    rules: [
        // ...
        {
            test: /.(graphql|gql)$/,
            exclude: /node_modules/,
            loader: "graphql-tag/loader",
        },
    ]
}

创建 client

apollo/createApolloClient.js

import {
    ApolloClient,
    createNetworkInterface,
} from "react-apollo";

export default function createApolloClient() {
    const networkInterface = createNetworkInterface({
        uri: `${yourGragqlUri}`,
        opts: {
            // fetch options
            credentials: "same-origin",
        },
    });

    const client = new ApolloClient({
        networkInterface,
    });

    return client;
}

apollo/index.js

import createApolloClient from "./createApolloClient";

const client = createApolloClient();

export default client;
export const apolloReducer = client.reducer();

添加 apollo reducer

rootReducer.js

+ import { apolloReducer as apollo } from "./apollo";

let reducersList = {
    // ...
    apollo,
};

使用 Apollo 的 Provider

App.jsx

- import { Provider } from "react-redux";
+ import { ApolloProvider } from "react-apollo";

import store from "./configureStore";
+ import client from "./apollo";

// ...
- 
+ 
      { /* ... */ }
- 
+

至此，你就搭建好了最简单的 ApolloClient。

当然，生产环境不能止步于此。如果你是新手，那么请继续看如何简单使用；或者进一步的定制。

GPU云服务器云服务器学前端开发简单还是后端简单的云服务器怎么搭建 21 vianet 21u机柜

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

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

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

摘要：分钟学是一个系列，简单暴力，包学包会。那怎么办呢本章就教你非常简单地实现扩展的。我们可以借鉴的的写法，为的实例添加一些自己的方法。更重要的是，也会有的效果，上一个的输出会成为下一个的输入，便于组合。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本地的 ...

levy9527 2019-08-22 11:10 评论0 收藏0
21 分钟学 apollo-client 系列：写入失败的原因和解决方案

摘要：分钟学是一个系列，简单暴力，包学包会。一旦你丢失了，可能会导致写入失败，或者尽管写入了，但本该携带的那一层的数据没有写入。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本地的 apollo store 数据提供定制方案请求拦截封装修改 clie...

Baoyuan 2019-08-22 11:10 评论0 收藏0
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 系列：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