在前端开发中，使用 graphql 作为 API 查询语言已经越来越流行，其中 Apollo Client 是一款非常优秀的 graphql 客户端库。而 npm 包 apollo-client-browser 则是 Apollo Client 在浏览器端的实现，本文将为大家详细介绍 npm 包 apollo-client-browser 的使用方法。
安装
使用 npm 进行安装：
npm install apollo-client-browser
初始化
使用 apollo-client-browser 需要在初始化时传入 GraphQL 服务器的地址：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - ---------- - ---- ----------------------
----- -------- - ----------------
---- ---------------------------------------
---
----- -------- - -------------- - ------- -- -- -
----- ----- - ----------------------------------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - ---
--
--
---
----- ------ - --- --------------
----- --------------------------
------ --- ----------------
---以上代码的作用是使用 Apollo Client 进行封装，设置了 GraphQL 服务地址，加入了身份认证信息。同时，该代码使用了 InMemoryCache 作为缓存，可以大大提升数据加载性能。
查询数据
使用 apollo-client-browser 进行查询需要编写相应的 graphql 查询语句，如下所示：
query Posts {
posts {
id
title
content
}
}以上查询语句用于查询所有文章的标题、内容以及 ID。下面是使用 apollo-client-browser 进行查询的示例代码：
-- -------------------- ---- -------
------ --- ---- --------------
----- ----- - ----
----- ----- -
----- -
--
-----
-------
-
-
--
-------------- ----- ---------------- -- -
-------------------------
---以上代码首先定义了一个 query 变量，用于存储 graphql 查询语句。然后调用 client.query 方法进行查询。得到的结果会在 result.data 中返回。
修改数据
另外，使用 apollo-client-browser 还可以进行数据的修改操作。比如，下面的 graphql 查询语句用于对文章进行修改：
mutation UpdatePost($id: ID!, $title: String!, $content: String!) {
updatePost(id: $id, title: $title, content: $content) {
id
title
content
}
}在上例中，updatePost 是一个 graphql 的 mutation 方法，它接收三个参数：id、title 和 content。下面是使用 apollo-client-browser 对文章进行修改的示例代码：
-- -------------------- ---- -------
------ --- ---- --------------
----- -------- - ----
-------- --------------- ---- ------- -------- --------- -------- -
-------------- ---- ------ ------- -------- --------- -
--
-----
-------
-
-
--
----- --------- - -
--- --
------ ---- -------
-------- ---- ---------
--
--------------- --------- --------- ---------------- -- -
-------------------------
---以上代码首先定义了 mutation 变量，存储对应的 graphql 查询语句。然后在调用 client.mutate 方法进行修改操作，传入两个参数：mutation 和 variables。其中，variables 变量则存储具体的变量值。最终结果会在 result.data 中返回。
总结
npm 包 apollo-client-browser 提供了非常方便的方式进行 graphql 查询和修改操作，同时也提供了缓存机制可以提高数据加载性能。本篇文章介绍了该包的初始化、查询和修改相关操作的具体示例。希望本文能够为大家掌握 apollo-client-browser 的使用方法提供一些有用的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dc010