在 Nuxt.js 中发送每个请求时，如何将对象添加到 apollo 上的数据？

Posted 2023-03-10

【中文标题】在 Nuxt.js 中发送每个请求时，如何将对象添加到 apollo 上的数据？

【英文标题】：How can I add an object to data on apollo when sending each request in Nuxt.js?

【发布时间】：2021-08-07 02:54:09

【问题描述】：

我有一个在每个请求上发送的对象，也是静态的。所以，我认为应该有类似 apollo 的 axios 拦截器，但我什么也没找到。感谢您的帮助。

【问题讨论】：

您好，您的回答似乎是针对 reactjs，我在 nuxtjs 中找不到相同的方法。

此代码用于我当前的 Nuxt 项目。在这里，它只是普通的 JS，与 React 或 Vue 无关。

我已经编辑了我的答案，并提供了更多关于从哪里开始的上下文（对于 Nuxt）。我不明白为什么我会在不警告您的情况下提出不适合标签的解决方案。但正如上面所说，到目前为止，这是 vanillaJS，与 Nuxt 无关。但是这个解决方案完全适用于 Nuxt，因此我每天都在工作中使用它。

【参考方案1】：

你可以有这种配置

/plugins/nuxt-apollo-config.js

import  setContext  from 'apollo-link-context'
import  from  from 'apollo-link'
import  createHttpLink  from '@apollo/client/core'

export default ( $config:  baseUrlGraphql  ) => 
  const headersConfig = setContext(() => (
    credentials: 'same-origin',
    headers: 
      Authorization: 'tasty-token',
      'specific-token': 'static_token', // you can put your static data here for example
    ,
  ))

  return 
    link: from([
      headersConfig,
      // anotherCustomLink,
      createHttpLink(
        credentials: 'include',
        uri: baseUrlGraphql,
        fetch: (uri, options) => 
          return fetch(uri, options)
        ,
      ),
    ]),
  

然后您可以阅读此文档以了解整个链接的工作原理：https://www.apollographql.com/docs/react/api/link/introduction/

这样，您可以在链中添加一个链接，如我上面的 sn-p（命名为 anotherCustomLink）并访问/修改后续操作

const anotherCustomLink = (operation, forward) => 
  console.log('what is the current context?', operation.getContext())
  operation.setContext(...)
  return forward(operation).map((data) => 
    ...
    return data
  )

编辑：作为起点，您应该将其放入您的 nuxt.config.js 文件中

export default 
  ...
  apollo: 
    clientConfigs: 
      // recommended: use a file to declare the client configuration (see below for example)
      default: '@/plugins/nuxt-apollo-config.js',
    ,
  

【讨论】：

这对 nuxt.js 也有帮助吗？

这种配置是在我当前的 Nuxt 项目上完成的。 Vue 和 Nuxt 之间只有很小的区别，尤其是当它是这种配置时。不过既然你贴了 Nuxt 标签，我就直接回复 Nuxt 了。

它如何访问我的请求数据？它只适用于标题吗？

您可以为您的 fetcher 配置几乎任何东西。至于请求数据，您也可以访问它。文档非常完整：apollographql.com/docs/react/api/link/introduction/…