背景
在前端开发过程中，GraphQL 作为一种新型的 API 技术，被越来越多的团队所采用。而 apollo-link-context 是一个帮助前端团队在请求中添加上下文信息的 npm 包。
本篇文章将带你详细了解 apollo-link-context，包括它的使用方法和指导意义，希望能够帮助前端团队更有效地利用它完成 GraphQL 的请求。
安装
在继续使用之前，我们需要先安装 apollo-link-context：
npm install apollo-link-context
使用方法
创建 Context
Apollo Link 负责在 GraphQL 操作链上对请求进行包装。可以使用 Apollo Link 新建一个包含 GraphQL 操作方式的请求。同时我们可以使用 apollo-link-context 中的 createContext 函数为请求创建上下文。
上下文信息可以是任何内容，包括 token、用户身份信息、语言等等。
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - ---------- - ---- ----------------------
----- -------- - -------------- - ------- -- -- -
-- ----------
-- ---
----- ------- - -
------ -----
----- --------
--
------ -
-------- -
-----------
------------ -------------
-------------- ------- ------------------
-
-
---
----- -------- - --- ----------
---- --------------
---
----- ---- - -------------------------- -----------在上述代码中，authLink 负责管理我们的授权信息。它使用了 apollo-link-context 中的 setContext 函数来为请求添加上下文信息。在上面的例子中，我们将请求的头部 headers 添加了 token 和 user 两个特定的值，并将其作为上下文信息传递。在 setContext 函数的第二个参数中，headers 参数包含了之前的 header 信息，我们需要重新构造 header 信息，以包含上面定义的 context 信息。
使用 Context
上面我们已经使用 createContext 函数为请求创建了上下文。那我们该如何使用这些上下文信息呢？我们可以使用 apollo-client 中的 useContest 函数。
-- -------------------- ---- -------
------ - -------- - ---- ---------------------
------ --- ---- --------------
----- -------- - ----
----- -- -
-- -
--
----
-------
-
-
--
------ ----- ------- - -- -- -
----- - ---- - - ------------------ -
-------- -
------ -----
----- --------
-
---
-- ------
------ - ---- --
--上面的代码演示了我们如何使用 createContext 创建的上下文信息，在 useQuery 的调用中添加 context 参数。在 context 参数中，我们指定了 token 和 user。 这些信息将通过 Context 在请求中传递，并可以在后端进行安全地授权验证，通过返回受保护的数据。
总结
在本文中，我们介绍了如何使用 apollo-link-context，帮助我们在 GraphQL 请求中添加上下文信息。我们可以将任何信息作为上下文信息在请求时进行传递。
使用 apollo-link-context 不仅可以提高开发效率，而且还可以在应用程序处理安全验证时提供重要的支持。它可以帮助前端团队快速创建 API 调用和应用程序，同时还可以将应用程序和后端 API 服务的链接更加紧密地结合起来。
通过本文的学习，相信你已经了解 apollo-link-context 的使用方法及其对于前端开发的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196119