21 分鐘學(xué) apollo-client 系列：簡(jiǎn)單搭建

ranwu 發(fā)布于2019-08-22 11:09 / 3541人閱讀

摘要：分鐘學(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ù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案

請(qǐng)求攔截

封裝修改 client 的 api
apollo store 存儲(chǔ)細(xì)節(jié)


寫入 store 的失敗原因分析和解決方案

在 Redux 基礎(chǔ)上添加 Apollo 其它教程

Apollo 其實(shí)提供了示例倉(cāng)庫(kù)：

Small Example: Snack | Apollo React Docs

Full Example: GitHunt | Apollo React Docs

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

說(shuō)起來(lái) GitHunt 這個(gè)庫(kù)還蠻奇怪的，不同于其它教程一般把示例 repo 寫得比較精簡(jiǎn)，這個(gè) repo 搞了一堆東西來(lái)迷惑你。
其中提到了 persistgraphql 等需要后端配合的東西，徒增了配置的復(fù)雜性。

你可以先試試把上面的例子跑起來(lái)，畢竟代碼比較全，也有助于你看懂我下一章節(jié)是如何進(jìn)行封裝的。
如果不行，再跟隨我的簡(jiǎn)單步驟試試。

環(huán)境要求

請(qǐng)確保你已經(jīng)搭建了自己的 Redux 環(huán)境

node >= 6.10

npm >= 3.10

react: 15 ~ 16

redux: 3.x

webpack: 2.x

下文在行號(hào)前添加 - 表示刪除的原代碼， + 表示新增的代碼。

是的，就是從 git commit 里復(fù)制過(guò)來(lái)的

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

增加對(duì) .gql 文件的支持

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

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

創(chuàng)建 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";

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

至此，你就搭建好了最簡(jiǎn)單的 ApolloClient。

當(dāng)然，生產(chǎn)環(huán)境不能止步于此。如果你是新手，那么請(qǐng)繼續(xù)看如何簡(jiǎn)單使用；或者進(jìn)一步的定制。