介绍
在前端开发中，使用 GraphQL 作为数据查询语言已经成为越来越普遍的做法。由于各种原因，我们可能并不想在本地开发的时候直接请求到服务器，这时候我们需要使用 mock 来模拟服务器的数据。mock 的实现方式有很多，比如手写 mock，使用第三方库等等。
本文将介绍一个 npm 包 mock-apollo-client，它可以提供一个假的 Apollo Client，同时具有本地数据和对 schema 的支持，可以帮助我们更加方便地进行前端开发。
安装
使用 npm 安装 mock-apollo-client
npm install mock-apollo-client
使用
在具体使用 mock-apollo-client 前，我们需要确保你已经了解了 Apollo Client 和在前端中如何使用。
首先，需要导入 mock-apollo-client 并创建实例。
import MockApolloClient from "mock-apollo-client";
const mockClient = new MockApolloClient({});创建 mock client 实例后，你可以使用 mockClient.setRequestHandler 来处理网络请求。这个函数接受两个参数：一个 GraphQL 查询或 mutation 请求和 mock 数据。
-- -------------------- ---- -------
------ --- ---- --------------
------ - ---------- - ---- --------------
----- ----- - ----
----- --------- -
--- -
---
-
-
--
----- ------------ - -
----- -
---- -
---- ------ -------
--
--
--
----- ---- - --- ---------------------- -------- -- -
------ --------------------------------- -- -
-- ----------------- -
------ ---------
-
-- --------------- -
----------------- ------- ---------------
------ ---------
-
------ ---------
---
---
---------------------------------- --------------以上代码的实现方法是模拟 GraphQL 查询和 _mergeDeep，该函数是大多数查询的默认合并函数。
在处理网络请求的同时，我们也可以使用 mockClient.restore() 函数来清除之前的 mock 数据，这在测试过程中非常有用。
mockClient.restore();
示例代码
我们来看一个完整的例子，该例子包含 GraphQL 查询，mutation 和 Subscription。同时结合了 mock-apollo-client 和 graphql-tag 来使用。
-- -------------------- ---- -------
------ ---------------- ---- ---------------------
------ - ---------- - ---- --------------
------ - ------------- - ---- ------------------------
------ --- ---- --------------
----- ---------- - --- ------------------
------ --- ----------------
---
-------------- -------------------- -- -- -
----- ----- - ----
----- --------- -
--- -
---
-
-
--
----- ------------- - -
----- -
---- -
---- ------ ------
--
--
--
----- -------- - ----
-------- -------------------- ----------- -
---------- ------- -
---
-
-
--
----- ---------------- - -
----- -
---- -
---- --------- ------
--
--
--
----- ------------ - ----
------------ ---------------- -
--- -
---
-
-
--
----- -------------------- - -
----- -
---- -
---- ------------- ------
--
--
--
----- ---- - --- ---------------------- -------- -- -
------ --------------------------------- -- -
-- ----------------- -
------ ---------
-
-- --------------- -
----------------- ------- ---------------
------ ---------
-
------ ---------
---
---
------------- -- -
----------------------------------- ---------------
-------------------------------------- ------------------
------------------------------------------ ----------------------
---
------------ -- -
---------------------
---
---------- ----- ---- ---- ------ ------ -- -
------------------ ------ ----- ------------------ -- -
-------------------------------------------- -------
-------
---
---
---------- ------ ---- ---- ------ ------ -- -
----------
---------
--------- ---------
---------- -
------ -
----- -------
--
--
--
---------------- -- -
----------------------------------------------- -------
-------
---
---
---------- --------- ---- ---- ------ ------ -- -
---------------------- ------ ------------ --------------
------------ -
------------------------------------------------- -------
-------
--
---
---
---总结
Mock Apollo Client 是一个非常有用的工具，尤其在本地开发阶段通过模拟 GraphQL API 有助于前端开发。同时需要注意的是：mock-apollo-client 也有一些局限性，但是它对于一般的查询、mutation、subscription 都支持得很好，并可以很好的模拟网络请求。本文希望能够帮助到大家，为前端开发提供一种高效的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f697923a9b7065299ccb806