首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在apollo graphql客户端中针对特定突变在上下文中传递访问令牌

在 Apollo GraphQL 客户端中,可以通过自定义链接(custom link)的方式,在上下文中传递访问令牌。下面是一个示例的实现方法:

  1. 首先,确保你已经安装了 Apollo Client 和相关依赖。
  2. 创建一个自定义链接(custom link)来处理访问令牌的传递。自定义链接是 Apollo Client 中的一个中间件,可以在请求发送之前或之后进行一些额外的处理。
代码语言:txt
复制
import { ApolloLink } from 'apollo-link';

const authLink = new ApolloLink((operation, forward) => {
  // 从本地存储或其他地方获取访问令牌
  const token = localStorage.getItem('accessToken');

  // 将访问令牌添加到请求的上下文中
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : '',
    },
  }));

  return forward(operation);
});

在上面的代码中,我们创建了一个自定义链接 authLink,它会在每次请求发送之前将访问令牌添加到请求的上下文中。

  1. 创建 Apollo Client 实例时,将自定义链接添加到链接链中。
代码语言:txt
复制
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';

const httpLink = new HttpLink({ uri: 'https://example.com/graphql' });

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  // 其他配置项...
});

在上面的代码中,我们使用 authLink.concat(httpLink) 将自定义链接和 HTTP 链接链接在一起,形成一个链接链。

现在,当 Apollo Client 发送请求时,自定义链接会在请求的上下文中添加访问令牌,以便服务器端可以验证用户的身份。

需要注意的是,上述示例中的访问令牌是从本地存储中获取的,你可以根据实际情况修改获取访问令牌的方式。

此外,关于 Apollo GraphQL 客户端的更多信息和使用方法,你可以参考腾讯云的 Apollo GraphQL 相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

GraphQL在现代Web应用的应用与优势

前端设置(使用Apollo Client)接着,我们需要在前端应用配置Apollo Client,与我们的GraphQL服务器通信:npm install apollo-boost @apollo/client...查询语言:查询、突变、订阅在GraphQL,查询和突变是通过JSON-like结构表示的字符串。...在上面的查询示例,user是字段,id和email是user字段的子字段。参数id: 1用于定制查询。4....查询根和突变根接下来,定义GraphQL的查询根(Query)和突变根(Mutation)类型,它们是客户端请求数据和修改数据的入口点。type Query { user(id: ID!)...在上面的例子,me查询和username字段无需特殊权限即可访问,但访问用户的email字段则需要管理员权限(通过@auth(requires: ADMIN)指令指定)。

6110

GraphQL最突出的架构优势是什么?

数据图从客户端延伸到服务器,并为现代 Web 应用程序获取数据和更改状态时面临的最常见基础架构问题提供了答案 为了通过 GraphQL 与后端服务通信,Apollo Client 公开了几种客户端方法...对于突变,解析器可以简单地将控制权传递给一个应用层用例。 将用例作为应用程序的重心后,从 REST 切换到 GraphQL(或同时支持两者)变得轻而易举。...使用 Apollo Federation,每个服务团队都可以从其限界上下文中构建和管理自己的 GraphQL 服务,将其注册到一个 Apollo 网关,从而在整个企业中分布化 GraphQL 的运维工作...通过 Apollo Federation,我们可以绘制并公开由多个 GraphQL 端点组成的单个数据图 在 Federation ,你可以组成模式并解析其他服务 / 限界上下文中的字段。...在架构层面,由于 GraphQL 仅向客户端公开单个端点,因此它满足了这一原则。 客户端隐藏了字段解析机制的所有复杂性,它只需关注如何在 GraphQL 服务器之上构建即可。

2.1K20

一种不错的 BFF Microservice GraphQLREST API 层的开发方式

Controller 外部化配置 - DotEnv (设置,特定于 Env 的 API URL) 测试 - Jest , SuperTest , GraphQL Tester。...客户端 API 当我们构建基于 GraphQL 的服务器时,可能需要从其他下游基于 GraphQL 的 API 服务器获取数据。...如果启用了 JWT 安全性(环境变量 JWT_AUTH 为 true),我们需要使用登录突变 API 来获取示例 JWT 令牌(当前设置为1小时到期) Step 1 - 使用登录 mutation(突变...“Authorization” header ,在所有查询传递。...Compression 默认情况,压缩是在服务器上启用的,并且基于压缩模块 配置详细信息位于 compression.ts 文件 如果需要在不压缩的情况获取响应,请在请求头中传递 x-no-compression

2.3K10

来试试Graphql

下面对比一 RESTful api 和 GraphQL 的优缺点。 优点: 声明式的接口获取 RESTful api 返回的字段冗余, 当多个终端共用接口时,尤其明显。...resolver 的解析规则是, 从外到内依次处理查询块,为每一个查询块执行对应的 resolver 函数,并传递外层调用返回的结果作为第一个参数,也就是下面代码的 obj 。...// context:这是特定查询中所有解析程序共享的对象,用于包含每个请求的状态,包括身份验证信息,数据加载器实例以及解析该查询时应考虑的任何其他内容 // info:此参数仅在高级情况使用,但它包含有关查询执行状态的信息...它仅记录在GraphQL.js源代码。...更多内容查看 resolver 文档[3] 然后我们在 http://127.0.0.1:4000/graphql 或者在客户端 GraphiQL 测试 ?

1.9K20

怎样使用 apollo-link-state 管理本地数据

解决问题的基础 我们知道这个问题需要解决,现在让我们思考一,如何正确地在 Apollo Client 管理状态?...GraphQL:一旦学会,随处可用 关于 GraphQL 有一个常见的误区:GraphQL 的实施依赖于服务器端某种特定的实现。事实上,GraphQL 具有很强的灵活性。...GraphQL 并不在乎请求是要发送给一个 gRPC 服务器,或是 REST 端点,又或是客户端缓存。GraphQL 是一门针对数据的通用语言,与数据的来源毫无关联。...如果你没见过以上这段类型签名,不要紧张,只需记住重要的两点:query 或者 mutation 的变量通过 args 参数传递给 resolver;Apollo cache 会作为 context 参数的一部分传递给...apollo-link-state 支持异步的 resolver 方法,可以用于执行一些异步的副作用过程,比如访问一些设备的 API。然而,我们不建议在 resolver 对 REST 端点发请求。

2.3K100

构建带 Subscriptions 的 graphql golang 后端

现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架,其中最着名的是Apollo和Graphcool 。...Apollo团队还开发了针对WebSockets的GraphQL协议,该协议主要用于Apollo Client和Graphcool的Subscriptions。...它有一个简单的目的: 实现GraphQL在WebSocket(由所有流行的GraphQL客户端使用),所以不必考虑与net/http无缝集成 与net/http无缝集成 提供访问已建立订阅的简单方法,执行身份验证并向相应的客户端发送更新...或者,您可以定义一个函数来对用户进行身份验证(在建立新连接时,Apollo客户端会将初始WebSocket消息与可选的authToken一起发送;该函数允许将令牌字符串解析为用户)。...借助graphqlws,现在可以轻松实现服务器端GraphQL订阅。 来吧,你可以尝试一! 我们希望你喜欢它。 ---- 在GitHub上提交 bug 或 issue 。

2.7K30

REST API和GraphQL API的比较

同样,将数据提供给客户端的方式是 GraphQL 和 REST 分歧最大的地方。在 REST 设计客户端提交 HTTP 请求,数据作为 HTTP 响应返回。...在 GraphQL 架构客户端提交查询以获取数据。 典型场景 REST API 假设您有一个 API 来获取学生数据。...id=1 // HTTP RESPONSE { "id": 1 "name": "john doe", "class": 3, "age": 11 } 在上面的示例,对发送到服务器的请求的响应将是关于...但是,由于可用的工具,客户端缓存优于 REST。一些使用缓存层的客户端Apollo Client,URQL)使用 GraphQL 的模式和类型系统,允许它们在客户端保留缓存。...GraphQL 的任何合法答案都应该是 200,包括数据和错误响应。客户端工具将有助于更有效地管理错误。错误作为特定错误对象的响应主体的一部分进行处理

38310

PayPal大规模采用GraphQL的探索和实践

有了 GraphQL,我们可以发送更新,客户端不再需要担心版本的更新。由于所有更新都发布到了 GraphQL 的一个端点,因此客户端可以在需要时获取更新的资源,而无需重新集成到新版本。...更容易测试:Apollo Client 等 GraphQL 工具可以更容易地在 React 等 UI 添加 GraphQL 查询。它有助于保持代码位于同一位置,并有助于调试和分离关注点。...GraphQL 层将复杂性隐藏在幕后。 分析:对特定字段的单个请求花费的时间进行检测。 曝光和招聘:社区的许多人对 GraphQL 感到兴奋,它帮助我们吸引人才加入 PayPal。...我们在 JS @ PayPal 公开会 上多次讨论了我们是如何在各种应用程序中使用 GraphQL 的。 6 我们面临哪些挑战?...图片来源:Possessed Photography on Unsplash 我们仍在创建一种标准方法来应对 GraphQL 技术的挑战,异常处理、身份认证、文件处理和批处理。

3K20

为什么我使用 GraphQL 而放弃 REST API?

在我所开发的那些拥有最复杂 API 应用程序,网络层设计和维护占去高达 40% 的开发时间,特别是由于我在本文中提到的一些边缘情况。...端点接受请求体的文件内容,因此,它们的参数将以 JSON 的形式在Dropbox-API-Arg请求头或 arg URL 参数传递。 JSON 在请求头中?...如果开发团队不是全栈的,那么服务器和客户端团队之间的沟通就至关重要,在没有机器可读的 API 规范的情况更是如此。 GraphQL 如何做得更好?...有针对不同平台的实现,也有许多可用的开发工具,其中最著名的是 GraphiQL,它捆绑了一个很好的、具有自动完成功能的 API 浏览器,以及一个文档浏览器,可以浏览从 GraphQL 模式自动生成的文档...如果服务器提供这种模式,文档可能会声明,null偏移量意味着默认情况应该返回第一页。

2.3K30

graphw00f:一款功能强大的GraphQL服务器引擎指纹识别工具

关于graphw00f: graphw00f是一款针对GQL节点的GraphQL指纹识别工具,该工具可以混合发送良性和恶意查询请求,以帮助广大研究人员识别和确定目标应用程序背后的GraphQL引擎。...精心构建的查询请求会导致不同的GraphQL服务器实现对查询、突变和订阅做出不同的响应,以实现我们对后端引擎进行指纹识别并区分不同的GraphQL实现。...安全检测: 当前版本的graphw00f将尝试检测和发现下列GraphQL引擎: Graphene - Python Ariadne - Python Apollo - TypeScript graphql-go...- Julia Strawberry - Python Tartiflette - Python GraphQL技术防御矩阵: 每个指纹技术(Graphene、Ariadne等)都有一个相关文档(例如...Graphene),其中涵盖了特定技术支持的安全防御机制,以便更好地了解如何攻击实现。

1.1K20

一张图弄明白 Vuex 里该存放什么样的数据

在本文中我将尝试回答诸如“Vuex 在何种情景是个称手的解决方案”,以及“何时用其他方式更好些”的这类问题。 I. 首先,为何使用 Vuex ?...若用户导航到了特定分类页面,则触发一次新的请求,以从 API 获取对应分类的开头 20 条。...如果用户访问了之前打开过的分类,我们既可以重新请求一次新鲜的数据,也可以实现某种缓存(Apollo 就提供了开箱即用的缓存机制)。...译注:GraphQL 是由 Facebook 创造的用于描述复杂数据模型的一种查询语言,是一种用于前后端数据查询方式的规范。Apollo 是基于 GraphQL 的全栈解决方案集合。...从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便;一个可用于 Vue 的插件是 https://vue-apollo.netlify.com/ 4-4. portals 乍一看

1.9K10

提高微服务安全性的11个方法

在许多情况,软件认为是恶意的字符,但这在某人的名字是完全有效的字符。那应该怎么办? 我觉得,最好在使用字符的上下文中判断,而不是尝试限制字符。...GraphQL 对你的 API 的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。...如果你想请求具备OAuth 2.0和React功能的GraphQL服务器,则只需传递一个Authorization标头即可。...该规范,还允许你通过向/userinfo端点发送访问令牌来查找用户的身份。你可以使用OIDC发现来查找此端点的URI,这提供了一种获取用户身份的标准方法。 ?...这种方法的优点: 服务可以使用访问令牌与任何其他内部服务进行对话(因为它们都是连接到同一个授权服务器) 有了一个可以查找所有范围和权限定义的地方 开发人员和安全人员更易于管理 交互更快 缺点: 如果一项服务的令牌遭到破坏

1.3K00

怎样编写好的 API?

REST 建议 GET 方法只能用来获取数据,所以在上面的集合,它是唯一一个安全的方法。不管你调用多少次基于 REST 的 GET 方法,它永远不会改变数据库的任何东西。...适用于前端的后端 如果你必须要构建一个 API 来满足一堆不同的客户端的话,那么这可能会非常困难。针对某个客户端所作出的决策可能会影响其他客户端的功能。...尽管 GraphQL 比 RESTful 要新的多,但是它们有很多相似之处。GraphQL 最大的不足之处在于它的缓存,它必须要在客户端或应用程序实现。...现在,有内置的实现了缓存功能的客户端库(比如 Apollo),但是这仍然要比使用 HTTP 提供的几乎免费的缓存功能要困难。...如果选择 GraphQL 的话,你需要自行负责为客户端或应用程序添加缓存。

59920

GraphQL到底怎么使?看看智联前端团队技术沉淀

GraphQL 模型 一套运行GraphQL 分为三层: 左侧是客户端和发出的 Document 和其他参数。...几乎是 Apollo GraphQL: Apollo 提供的实现和 GraphQL 生态,内容丰富,不止一套引擎,还提供了纯客户端使用(不局限JavaScript)多种工具。...当遇到问题在 apollo 生态找一找一般都会有收获。...像我们在 BFF 层已经有了完全针对功能点一对一的接口的情况,接口一旦开发完成,后续迭代要么彻底重写、要么不再改动,这种情况是用不到 GraphQL 的版本控制优势,将每个接口都实现为 GraphQL...服务本身是基础服务,供多方调用,需求不一但对外有统一的输出模型的情况:Github 开放接口,无法确定每个调用者需求是什么),可以使用 GraphQL

2.3K20

何在纯 JavaScript 中使用 GraphQL

在这篇教程,我想采用一种不一样的方法,并向你展示从 Node 和客户端 JavaScript(不带库)调用 GraphQL API 实际上有多么容易。...我们来看一个不使用特殊库的简单示例(请注意,我确实使用了 dotenv 来获取用于访问我 StepZen 后端的 API 密钥)。在这个示例,我仅传递了一个 query,该查询在发送前需要字符串化。...传递变量 在此示例,我们的查询具有一个需要传递的变量($id)。为了传递这个变量,我们需要将变量值添加到请求正文中包含的数据里。...其次,更重要的是我无法访问环境变量。需要强调的是,如果你的 API 需要传递某种 API 密钥或凭据,那么你不会希望在客户端执行这一操作,因为你的凭据将被公开。...不过在 API 完全开放的情况,我们先来看一它是如何完成的(请注意,我的示例确实有一个 API 密钥,但请按照我说的那样做,不要像在演示那样对付一……)。

3.5K10

面对极度复杂的前后端业务场景,使用 GraphQL 正确的姿势

在结合GraphQLApollo的情况我们的鉴权方案主要依赖于AppAsyncStorage和web localStorage这两个数据可持久化的方案。...之后MQTT会将心跳包传递到消息队列,然后再通过API到应用层来同步消息。 最后app端或web端通过暴露给他们的GraphQLAPI来读取到设备的信息,比如设备编号、固件版本、公网内网IP等。...现在转换到GraphQL后,请求发起机制、数据刷新、文件上传等等都完全不同,相当于要从头开始学习新的东西。 在使用Apollo的过程我们也遇到了一些坑。...第三点是没有做分页的数目限制,一般来说前端可以通过传递特定的参数给接口来设置每页的接收数量,但是有些前端人员可能会为了快速上线新功能将每页的数量直接设置为9999,这样服务器就又会被搞宕机。...授权上可以针对操作也可以针对字段进行具体的授权。请求频率限制上既要防止恶意刷请求也要实现基于IP和UserID的限制。

7.3K20

GraphQL 实践与服务搭建

请求进行查询,其集中的 API http://localhost:3000/graphql,所有的操作都通过这个接口来执行,这会在后面的操作在展示到。...而服务端要做的就是搭建一个 GraphQL 服务,这在后面也会操作到,也算是本文的重点。 接下来便会在客户端中体验 GraphQL,看看 GraphQL 究竟有多好用。...不仅需要在后端配置 GraphQL 服务,用于接收 GraphQL 查询并验证和执行,此外前端通常需要 GraphQL 客户端,来方便使用 GraphQL 获取数据,目前实用比较多的是Apollo Graph...在上面一开始的例子是 Code First 方式,通常使用该方式即可,无需关心 Schema 是如何生成的。下文也会以 Code First 方式来编写 GraphQL 服务。...在我看来 GraphQL 更多是业务数据特别复制的情况使用,往往能够事半功倍。但对于本文中示例的代码而言,GraphQL 反倒有点过于先进了。

5.2K10
领券