即使使用了動態路由，有時你也只想要渲染一條路徑（類似于傳統的靜態路由）。這時 Switch 組件就登上了舞臺。如果沒有 Switch，React Router 會渲染每一個匹配當前 URL 的組件，那么在上面的 Chat 組件中，我們就會既有 Conversation 組件，又有 EmptyState 組件。Switch 會告訴 React Router，讓它只渲染第一個匹配當前 URL 的路由并忽視掉其它的。

現在，讓我們更進一步，深入了解一下 Apollo 的客戶端 —— 特別是上文已經提及的 createClient 函數。util/apollo.js 文件長這樣：

// client/src/util.apollo.js
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import * as AbsintheSocket from "@absinthe/socket";
import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
import { Socket as PhoenixSocket } from "phoenix";
import { createHttpLink } from "apollo-link-http";
import { hasSubscription } from "@jumpn/utils-graphql";
import { split } from "apollo-link";
import { setContext } from "apollo-link-context";
import Cookies from "js-cookie";

const HTTP_URI =
  process.env.NODE_ENV === "production"
    ");"https://brisk-hospitable-indianelephant.gigalixirapp.com"
    : "http://localhost:4000";

const WS_URI =
  process.env.NODE_ENV === "production"
    ");"wss://brisk-hospitable-indianelephant.gigalixirapp.com/socket"
    : "ws://localhost:4000/socket";

// ...

開始很簡單，導入一堆我們接下來需要用到的依賴，并且根據當前的環境，將 HTTP URL 和 websocket URL 設置為常量 —— 在 production 環境中指向我的 Gigalixir 實例，在 development 環境中指向 localhost。

// client/src/util.apollo.js
// ...

export const createClient = () => {
  // Create the basic HTTP link.
  const httpLink = createHttpLink({ uri: HTTP_URI });

  // Create an Absinthe socket wrapped around a standard
  // Phoenix websocket connection.
  const absintheSocket = AbsintheSocket.create(
    new PhoenixSocket(WS_URI, {
      params: () => {
        if (Cookies.get("token")) {
          return { token: Cookies.get("token") };
        } else {
          return {};
        }
      },
    }),
  );

  // Use the Absinthe helper to create a websocket link around
  // the socket.
  const socketLink = createAbsintheSocketLink(absintheSocket);

  // ...
});

Apollo 的客戶端要求你提供一個鏈接 —— 本質上說，就是你的 Apollo 客戶端所請求的 GraphQL 服務器的連接。通常有兩種類型的鏈接 —— HTTP 鏈接，通過標準的 HTTP 來向 GraphQL 服務器發送請求，和 websocket 鏈接，開放一個 websocket 連接并通過套接字來發送請求。在我們的例子中，我們兩種都使用了。對于通常的 query 和 mutation，我們將使用 HTTP 鏈接，對于 subscription，我們將使用 websocket 鏈接。

// client/src/util.apollo.js
export const createClient = () => {
  //...

  // Split traffic based on type -- queries and mutations go
  // through the HTTP link, subscriptions go through the
  // websocket link.
  const splitLink = split(
    (operation) => hasSubscription(operation.query),
    socketLink,
    httpLink,
  );

  // Add a wrapper to set the auth token (if any) to the
  // authorization header on HTTP requests.
  const authLink = setContext((_, { headers }) => {
    // Get the authentication token from the cookie if it exists.
    const token = Cookies.get("token");

    // Return the headers to the context so httpLink can read them.
    return {
      headers: {
        ...headers,
        authorization: token ");`Bearer ${token}` : "",
      },
    };
  });

  const link = authLink.concat(splitLink);

  // ...
};

Apollo 提供了 split 函數，它可以讓你根據你選擇的標準，將不同的查詢請求路由到不同的鏈接上 —— 你可以把它想成一個三項式：如果請求有 subscription，就通過套接字鏈接來發送，其他情況（Query 或者 Mutation）則使用 HTTP 鏈接傳送。

如果用戶已經登陸，我們可能還需要給兩個鏈接都提供認證。當用戶登陸以后，我們將其認證令牌設置到 token 的 cookie 中（下文會詳細介紹）。與 Phoenix 建立 websocket 連接時，我們使用token 作為參數，在 HTTP 鏈接中，這里我們使用 setContext 包裝器，將token 設置在請求的頭字段中。

// client/src/util.apollo.js
export const createClient = () => {
  // ...

  return new ApolloClient({
    cache: new InMemoryCache(),
    link,
  });
});

如上所示，除了鏈接以外，一個 Apollo 的客戶端還需要一個緩存的實例。GraphQL 會自動緩存請求的結果來避免對相同的數據進行重復請求。基本的 InMemoryCache 已經可以適用大部分的用戶案例了 —— 它就是將查詢的數據存在瀏覽器的本地狀態中。

好噠，我們已經搭建好了 Apollo 的客戶端實例，并且通過 ApolloProvider 的高階函數讓這個實例在整個應用中都可用。現在讓我們來看一看如何運行 query 和 mutation。我們從 Posts 組件開始，Posts 組件將在我們的首頁渲染一個帖子的列表。

// client/src/components/Posts.js
import React, { Fragment } from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import produce from "immer";
import { ErrorMessage, Feed, Loading } from "components";

export const GET_POSTS = gql`
  {
    posts {
      id
      body
      insertedAt
      user {
        id
        name
        gravatarMd5
      }
    }
  }
`;

export const POSTS_SUBSCRIPTION = gql`
  subscription onPostCreated {
    postCreated {
      id
      body
      insertedAt
      user {
        id
        name
        gravatarMd5
      }
    }
  }
`;

// ...

首先是各種庫的引入，接著我們需要為我們想要渲染的帖子寫一些查詢。這里有兩個 —— 首先是一個基礎的獲取帖子列表的 query（也包括帖子作者的信息），然后是一個 subscription，用來告知我們新帖子的出現，讓我們可以實時地更新屏幕，保證我們的列表處于最新。

// client/src/components/Posts.js
// ...

const Posts = () => {
  return (
    
      
Feed
      
        {({ loading, error, data, subscribeToMore }) => {
          if (loading) return ;
          if (error) return ;
          return (
            
                subscribeToMore({
                  document: POSTS_SUBSCRIPTION,
                  updateQuery: (prev, { subscriptionData }) => {
                    if (!subscriptionData.data) return prev;
                    const newPost = subscriptionData.data.postCreated;

                    return produce(prev, (next) => {
                      next.posts.unshift(newPost);
                    });
                  },
                })
              }
            />
          );
        }}
      
    
  );
};

現在我們將實現真正的組件部分。首先，執行基本的查詢，我們先渲染 Apollo 的 。它給它的子組件提供了一些渲染的 props —— loading，error，data 和 subscribeToMore。如果查詢正在加載，我們就渲染一個簡單的加載圖片。如果有錯誤存在，我們渲染一個通用的 ErrorMessage 組件給用戶。否則，就說明查詢成果，我們就渲染一個 Feed 組件（data.posts 中包含著需要渲染的帖子，結構和 query 中的結構一致）。

subscribeToMore 是一個 Apollo 幫助函數，用于實現一個只需要從用戶正在瀏覽的集合中獲取新數據的 subscription。它應該在子組件的 componentDidMount 階段被渲染，這也是它被作為 props 傳遞給 Feed 的原因 —— 一旦 Feed 被渲染，Feed 負責調用 subscribeToNew。我們給 subscribeToMore 提供了我們的 subscription 查詢和一個 updateQuery 的回調函數，該函數會在 Apollo 接收到新帖子被建立的通知時被調用。當那發生時，我們只需要簡單將新帖子推入我們當前的帖子數組，使用 immer 可以返回一個新數組來確保組件可以正確地渲染。

現在我們已經有了一個帶帖子列表的首頁啦，這個首頁還可以實時的對新建的帖子進行響應 —— 那我們應該如何新建帖子呢？首先，我們需要允許用戶用他們的賬戶登陸，那么我們就可以把他的賬戶和帖子聯系起來。我們需要為此寫一個 mutation —— 我們需要將電子郵件和密碼發送到服務器，服務器會發送一個新的認證該用戶的令牌。我們從登陸頁面開始：

// client/src/pages/Login.js
import React, { Fragment, useContext, useState } from "react";
import { Mutation } from "react-apollo";
import { Button, Col, Container, Form, Row } from "react-bootstrap";
import Helmet from "react-helmet";
import gql from "graphql-tag";
import { Redirect } from "react-router-dom";
import renderIf from "render-if";
import { AuthContext } from "util/context";

export const LOGIN = gql`
  mutation Login($email: String!, $password: String!) {
    authenticate(email: $email, password: $password) {
      id
      token
    }
  }
`;

第一部分和 query 組件十分相似 —— 我們導入需要的依賴文件，然后完成登陸的 mutation。這個 mutation 接受電子郵件和密碼作為參數，然后我們希望得到認證用戶的 ID 和他們的認證令牌。

// client/src/pages/Login.js
// ...

const Login = () => {
  const { token, setAuth } = useContext(AuthContext);
  const [isInvalid, setIsInvalid] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  if (token) {
    return <Redirect to="/" />;
  }

  // ...
};

在組件中，我們首先去從 context 中獲取當前的 token 和一個叫 setAuth 的函數（我們會在下文中介紹 setAuth）。我們也需要使用 useState 來設置一些本地的狀態，那樣我們就可以為用戶的電子郵件，密碼以及他們的證書是否有效來存儲臨時值（這樣我們就可以在表單中顯示錯誤狀態）。最后，如果用戶已經有了認證令牌，說明他們已經登陸，那么我們就直接讓他們跳轉去首頁。

// client/src/pages/Login.js
// ...

const Login = () => {
  // ...

  return (
    
      
        
        
      
       setIsInvalid(true)}>
        {(login, { data, loading, error }) => {
          if (data) {
            const {
              authenticate: { id, token },
            } = data;
            setAuth({ id, token });
          }

          return (
            
              
                
                  
 {
                      e.preventDefault();
                      login({ variables: { email, password } });
                    }}
                  >
                    
                      Email address
                       {
                          setEmail(e.target.value);
                          setIsInvalid(false);
                        }}
                        isInvalid={isInvalid}
                      />
                      {renderIf(error)(
                        
                          Email or password is invalid
                        ,
                      )}
                    

                    
                      Password
                       {
                          setPassword(e.target.value);
                          setIsInvalid(false);
                        }}
                        isInvalid={isInvalid}
                      />
                    

                    
                      {loading ");

這里的代碼看起來很洋氣，但是不要懵 —— 這里大部分的代碼只是為表單做一個 Bootstrap 組件。我們從一個叫做 Helmet（react-helmet） 組件開始 —— 這是一個頂層的表單組件（相較而言，Posts 組件只是 Home 頁面渲染的一個子組件），所以我們希望給他一個瀏覽器標題和一些 metadata。下一步我們來渲染 Mutation 組件，將我們的 mutation 語句傳遞給他。如果 mutation 返回一個錯誤，我們使用 onError 回調函數來將狀態設為無效，來將錯誤顯示在表單中。Mutation 將一個函數傳將會遞給調用他的子組件（這里是 login），第二個參數是和我們從 Query 組件中得到的一樣的數組。如果 data 存在，那就意味著 mutation 被成功執行，那么我們就可以將我們的認證令牌和用戶 ID 通過 setAuth 函數來儲存起來。剩余的部分就是很標準的 React 組件啦 —— 我們渲染 input 并在變化時更新 state 值，在用戶試圖登陸，而郵件密碼卻無效時顯示錯誤信息。

那 AuthContext 是干嘛的呢？當用戶被成功認證后，我們需要將他們的認證令牌以某種方式存儲在客戶端。這里 GraphQL 并不能幫上忙，因為這就像是個雞生蛋問題 —— 發出請求才能獲取認證令牌，而認證這個請求本身就要用到認證令牌。我們可以用 Redux 在本地狀態中來存儲令牌，但如果我只需要儲存這一個值時，感覺這樣做就太過于復雜了。我們可以使用 React 的 context API 來將 token 儲存在我們應用的根目錄，在需要時調用即可。

首先，讓我們建立一個幫助函數來幫我們建立和導出 context：

// client/src/util/context.js
import { createContext } from "react";

export const AuthContext = createContext(null);

接下來我們來新建一個 StateProvider 高階函數，這個函數會在應用的根組件被渲染 —— 它將幫助我們保存和更新認證狀態。

// client/src/containers/StateProvider.js
import React, { useEffect, useState } from "react";
import { withApollo } from "react-apollo";
import Cookies from "js-cookie";
import { refreshSocket } from "util/apollo";
import { AuthContext } from "util/context";

const StateProvider = ({ client, socket, children }) => {
  const [token, setToken] = useState(Cookies.get("token"));
  const [userId, setUserId] = useState(Cookies.get("userId"));

  // If the token changed (i.e. the user logged in
  // or out), clear the Apollo store and refresh the
  // websocket connection.
  useEffect(() => {
    if (!token) client.clearStore();
    if (socket) refreshSocket(socket);
  }, [token]);

  const setAuth = (data) => {
    if (data) {
      const { id, token } = data;
      Cookies.set("token", token);
      Cookies.set("userId", id);
      setToken(token);
      setUserId(id);
    } else {
      Cookies.remove("token");
      Cookies.remove("userId");
      setToken(null);
      setUserId(null);
    }
  };

  return (
    <AuthContext.Provider value={{ token, userId, setAuth }}>
      {children}
    AuthContext.Provider>
  );
};

export default withApollo(StateProvider);

這里有很多東西。首先，我們為認證用戶的 token 和 userId 建立 state。我們通過讀 cookie 來初始化 state，那樣我們就可以在頁面刷新后保證用戶的登陸狀態。接下來我們實現了我們的 setAuth 函數。用 null 來調用該函數會將用戶登出；否則就使用提供的 token 和 userId來讓用戶登陸。不管哪種方法，這個函數都會更新本地的 state 和 cookie。

在同時使用認證和 Apollo websocket link 時存在一個很大的難題。我們在初始化 websocket 時，如果用戶被認證，我們就使用令牌，反之，如果用戶登出，則不是用令牌。但是當認證狀態發生變化時，我們需要根據狀態重置 websocket 連接來。如果用戶是先登出再登入，我們需要用戶新的令牌來重置 websocket，這樣他們就可以實時地接受到需要登陸的活動的更新，比如說一個聊天對話。如果用戶是先登入再登出，我們則需要將 websocket 重置成未經驗證狀態，那么他們就不再會實時地接受到他們已經登出的賬戶的更新。事實證明這真的很難 —— 因為沒有一個詳細記錄的下的解決方案，這花了我好幾個小時才解決。我最終手動地為套接字實現了一個重置函數：

// client/src/util.apollo.js
export const refreshSocket = (socket) => {
  socket.phoenixSocket.disconnect();
  socket.phoenixSocket.channels[0].leave();
  socket.channel = socket.phoenixSocket.channel("__absinthe__:control");
  socket.channelJoinCreated = false;
  socket.phoenixSocket.connect();
};

這個會斷開 Phoenix 套接字，將當前存在的 Phoenix 頻道留給 GraphQL 更新，創建一個新的 Phoenix 頻道（和 Abisnthe 創建的默認頻道一個名字），并將這個頻道標記為連接（那樣 Absinthe 會在連接時將它重新加入），接著重新連接套接字。在文件中，Phoenix 套接字被配置為在每次連接前動態的在 cookie 中查找令牌，那樣每當它重聯時，它將會使用新的認證狀態。讓我崩潰的是，對這樣一個看著很普通的問題，卻并沒有一個好的解決方法，當然，通過一些手動的努力，它工作得還不錯。

最后，在我們的 StateProvider 中使用的 useEffect 是調用 refreshSocket 的地方。第二個參數 [token]告訴了 React 在每次 token 值變化時，去重新評估該函數。如果用戶只是登出，我們也要執行 client.clearStore() 函數來確保 Apollo 客戶端不會繼續緩存包含著需要權限才能得到的數據的查詢結果，比如說用戶的對話或者消息。

這就大概是客戶端的全部了。你可以查看余下的組件來得到更多的關于 query，mutation 和 subscription 的例子，當然，它們的模式都和我們所提到的大體一致。

讓我們來寫一些測試，來覆蓋我們的 React 代碼。我們的應用內置了 jest（create-react-app 默認包括它）；jest 是針對 JavaScript 的一個非常簡單和直觀的測試運行器。它也包括了一些高級功能，比如快照測試。我們將在我們的第一個測試案例里使用它。

我非常喜歡使用 react-testing-library 來寫 React 的測試案例 —— 它提供了一個非常簡單的 API，可以幫助你從一個用戶的角度來渲染和測試表單（而無需在意組件的具體實現）。此外，它的幫助函數可以在一定程度上的幫助你確保組件的可讀性，因為如果你的 DOM 節點很難訪問，那么你也很難通過直接操控 DOM 節點來與之交互（例如給文本提供正確的標簽等等）。

我們首先開始為 Loading 組件寫一個簡單的測試。該組件只是渲染一些靜態的 HTML，所以并沒有什么邏輯需要測試；我們只是想確保 HTML 按照我們的預期來渲染。

// client/src/components/Loading.test.js
import React from "react";
import { render } from "react-testing-library";
import Loading from "./Loading";

describe("Loading", () => {
  it("renders correctly", () => {
    const { container } = render(<Loading />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

當你調用 .toMatchSnapshot() 時，jest 將會在 __snapshots__/Loading.test.js.snap 的相對路徑下建立一個文件，來記錄當前的狀態。隨后的測試會比較輸出和我們所記錄的快照（snapshot），如果與快照不匹配則測試失敗。快照文件長這樣：

// client/src/components/__snapshots__/Loading.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Loading renders correctly 1`] = `

  

    
      Loading...
    
  

`;

在這個例子中，因為 HTML 永遠不會改變，所以這個快照測試并不是那么有效 —— 當然它達到了確認該組件是否渲染成功沒有任何錯誤的目的。在更高級的測試案例中，快照測試在確保組件只會在你想改變它的時候才會改變時非常的有效 —— 比如說，如果你在優化組件內的邏輯，但并不希望組件的輸出改變時，一個快照測將會告訴你，你是否犯了錯誤。

下一步，讓我們一起來看一個對與 Apollo 連接的組件的測試。從這里開始，會變得有些復雜；組件會期待在它的上下文中有 Apollo 的客戶端，我們需要模擬一個 query 查詢語句來確保組件正確地處理響應。

// client/src/components/Posts.test.js
import React from "react";
import { render, wait } from "react-testing-library";
import { MockedProvider } from "react-apollo/test-utils";
import { MemoryRouter } from "react-router-dom";
import tk from "timekeeper";
import { Subscriber } from "containers";
import { AuthContext } from "util/context";
import Posts, { GET_POSTS, POSTS_SUBSCRIPTION } from "./Posts";

jest.mock("containers/Subscriber", () =>
  jest.fn().mockImplementation(({ children }) => children),
);

describe("Posts", () => {
  beforeEach(() => {
    tk.freeze("2019-04-20");
  });

  afterEach(() => {
    tk.reset();
  });

  // ...
});

首先是一些導入和模擬。這里的模擬是避免 Posts 組件地 subscription 在我們所不希望地情況下被