[译] Elixir、Phoenix、Absinthe、GraphQL、React 和 Apollo

即使使用了动态路由，有时你也只想要渲染一条路径（类似于传统的静态路由）。这时 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 在我们所不希望地情况下被