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

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é)


寫(xiě)入 store 的失敗原因分析和解決方案

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

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

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

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

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

Apollo 使用的是 fetch api
從源碼來(lái)看，apollo 代碼中并沒(méi)有包含 polyfill，也就是說(shuō)，在低版本的瀏覽器上可能會(huì)因?yàn)槿鄙?fetch 而失敗。所以你需要安裝 isomorphic-fetch
另外，如果你碰到跨域等問(wèn)題，也是 fetch 引起的，和 apollo 沒(méi)什么關(guān)系。

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

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

所以你可以在這里

設(shè)置 headers

權(quán)限驗(yàn)證

取消請(qǐng)求

緩存請(qǐng)求

實(shí)踐中，建議把所有的 middlewares 寫(xiě)到一個(gè)多帶帶的文件。
我個(gè)人比較喜歡寫(xiě)簡(jiǎn)化的代碼，你也可以參考我進(jìn)行配置。

middlewares.js

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

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

    return networkInterface;
}

// ---- 請(qǐng)求前 ----

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();
}

// ---- 請(qǐng)求后 -----

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

    next();
}

建議對(duì)所有的 middlewares 包裹一層 try catch，因?yàn)槲野l(fā)現(xiàn) apollo 這個(gè)庫(kù)不能很好地報(bào)錯(cuò)，經(jīng)常靜默失敗。

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

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;

正式請(qǐng)求中，如果你的 schema 包含了 union type，形如

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

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

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

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

否則你可能會(huì)看到這樣的報(bào)錯(cuò)

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

報(bào)錯(cuò)信息會(huì)指引你閱讀這個(gè)文檔，說(shuō)的就是我上面描述的情況：Using Fragments on unions and interfaces

為了少寫(xiě)垃圾代碼，我寫(xiě)了一些 helper，希望對(duì)你有用。

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 可以寫(xiě)成

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;
}