摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。接管了請求和狀態(tài)管理。一般在生產(chǎn)環(huán)境中，我們通常還希望做權(quán)限驗證請求攔截等事務(wù)處理。

21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。
搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數(shù)據(jù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案

請求攔截

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


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

我們已經(jīng)搭建了最小化的 ApolloClient。

Apollo 接管了 api 請求和狀態(tài)管理。一般在生產(chǎn)環(huán)境中，我們通常還希望做權(quán)限驗證、請求攔截等事務(wù)處理。

于是，我們就需要通過 Apollo 提供的一些接口，結(jié)合自己的業(yè)務(wù)需求，定制自己的 Apollo。

GraphQL 入門: Apollo Client - 網(wǎng)絡(luò)層

上面這篇文章中，介紹了 Apollo 網(wǎng)絡(luò)層的基礎(chǔ)知識，推薦閱讀。我只是再做一些補充。

Apollo 使用的是 fetch api
從源碼來看，apollo 代碼中并沒有包含 polyfill，也就是說，在低版本的瀏覽器上可能會因為缺少 fetch 而失敗。所以你需要安裝 isomorphic-fetch
另外，如果你碰到跨域等問題，也是 fetch 引起的，和 apollo 沒什么關(guān)系。

const networkInterface = (createNetworkInterface({
    uri: "...",
    opts: {
        // fetch 相關(guān)的設(shè)置在這里配置
        credentials: "same-origin",
    },
}));

如果你使用過 Express 的話，就能很容易理解這個概念。否則你也可以理解為 middleware 就是請求的攔截器，可以在每個請求發(fā)送前或發(fā)送后，攔截請求，對其做一些修改，再決定是否傳遞，也可以直接取消。

所以你可以在這里

設(shè)置 headers

權(quán)限驗證

取消請求

緩存請求

實踐中，建議把所有的 middlewares 寫到一個多帶帶的文件。
我個人比較喜歡寫簡化的代碼，你也可以參考我進行配置。

middlewares.js

const wrapMiddlewares = (key) => (mws) => mws.map(mw => ({ [key]: mw }));
const wrapBeforewares = wrapMiddlewares("applyMiddleware");
const wrapAfterwares = wrapMiddlewares("applyAfterware");

// 可以看成一個沒有冗余代碼的配置表
export default function applyApolloMiddlewares(networkInterface) {
    networkInterface.use(wrapBeforewares([
        setHeaders,
    ]))
    .useAfter(wrapAfterwares([
        checkAuth,
    ]));

    return networkInterface;
}

// ---- 請求前 ----

function setHeaders(req, next) {
    try {
        if (!req.options.headers) {
            req.options.headers = {
                "Content-Type": "application/json;charset=utf-8",
            };
        }
    } catch (e) {
        console.error(e);
    }

    // 必須返回 next
    next();
}

// ---- 請求后 -----

function checkAuth({ response: res }, next) {
    try {
        // 自行處理 401 等各種 statusCode
    } catch (e) {
        console.error(e);
    }

    next();
}

建議對所有的 middlewares 包裹一層 try catch，因為我發(fā)現(xiàn) apollo 這個庫不能很好地報錯，經(jīng)常靜默失敗。

于是你的 createApolloClient 函數(shù)可以改寫為

createApolloClient.js

import { ApolloClient, createNetworkInterface } from "react-apollo";
import applyApolloMiddlewares from "./middlewares";

const networkInterface = (createNetworkInterface({
    uri: "...",
    opts: {
        // fetch 相關(guān)的設(shè)置在這里配置
        credentials: "same-origin",
    },
}));

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

return client;

正式請求中，如果你的 schema 包含了 union type，形如

content { # 類型為 Content
    ... on Article {
        id
        title
    }
    ... on Timeline {
        id
        content
    }
}

即根據(jù)返回數(shù)據(jù)的類型不同，抓取不同的數(shù)據(jù)，這在 GraphQL 中，使用的是 inline fragment 語法來解決。
而上面代碼中的 Content 這個類，本身沒有具體字段，但有許多子類，被稱為 union type。

可以看看 GraphQL 關(guān)于這一細(xì)節(jié)的描述：inline-fragments。

apollo 中使用一種啟發(fā)式的類型搜索方式，不像后端已經(jīng)存在所有的類型說明，前端為了類型安全，必須由你來告訴 apollo，該 union type 下到底有哪些子類

否則你可能會看到這樣的報錯

You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types.
     Apollo Client will not be able to able to accurately map fragments

報錯信息會指引你閱讀這個文檔，說的就是我上面描述的情況：Using Fragments on unions and interfaces

為了少寫垃圾代碼，我寫了一些 helper，希望對你有用。

const createIntrospectionFactory = (kind) => (name, possibleTypes) => ({
    name,
    kind,
    possibleTypes: possibleTypes.map(typename => ({ name: typename })),
});

const createInterface = createIntrospectionFactory("INTERFACE");
const createUnion = createIntrospectionFactory("UNION");

export default {
    introspectionQueryResultData: {
        __schema: {
            types: [
                createInterface("Content", [
                    "Article",
                    "Timeline",
                ]),
            ]
        }
    }
};

所以你的 client 可以寫成

import { ApolloClient, createNetworkInterface, IntrospectionFragmentMatcher } from "react-apollo";
import applyApolloMiddlewares from "./middlewares";
import fragmentMatcher from "./fragmentMatcher";

export default function createApolloClient() {
    const networkInterface = (createNetworkInterface({
        uri: "...",
        opts: {
            credentials: "same-origin",
        },
    }));

    const client = new ApolloClient({
        networkInterface: applyApolloMiddlewares(networkInterface),
        fragmentMatcher: new IntrospectionFragmentMatcher(fragmentMatcher),
    });

    return client;
}