将标题添加到所有Apollo查询

发布于 2025-01-30 05:33:33 字数 701 浏览 4 评论 0原文

正如标题所暗示的那样,我正在尝试为阿波罗(Apollo)提出的所有查询和突变添加标头。我知道我可以做

context: {
  headers: {
    'Accept-Language': $this.i18n.current;
  }
}

,但这只是一个查询或突变。我正在使用vue和我的当前nuxt.config.js如下所示,

apollo: {
    clientConfigs: {
      default: '~/plugins/apollo-config.js'
    },
    defaultOptions: {
      $query: {
        fetchPolicy: 'network-only',
        context: { // does not work
          headers: {
            "Accept-Language": $this.i18n.current, // not sure if this works as it is in config
          }
        }
      }
    },
    errorHandler: '~/plugins/apollo-error-handler.js'
  },

我很确定在这种情况下我使用上下文,但不确定我还应该如何做。任何帮助将不胜感激。

As the title suggest, I am trying to add a header to all queries and mutations made by apollo. I know I can do

context: {
  headers: {
    'Accept-Language': $this.i18n.current;
  }
}

but that is only for one query or mutation. I am using nuxt with vue and my current nuxt.config.js is as follows

apollo: {
    clientConfigs: {
      default: '~/plugins/apollo-config.js'
    },
    defaultOptions: {
      $query: {
        fetchPolicy: 'network-only',
        context: { // does not work
          headers: {
            "Accept-Language": $this.i18n.current, // not sure if this works as it is in config
          }
        }
      }
    },
    errorHandler: '~/plugins/apollo-error-handler.js'
  },

I'm pretty sure I'm using context wrong in this case but not sure how else I should do it. Any help would be very much appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小苏打饼 2025-02-06 05:33:33

我根本不是关于GraphQl的专业人员,但是去年,我取得了很好的工作(与JWT标头),这是我当时回到的

nuxt.config.js>

apollo: {
  clientConfigs: {
    default: '@/plugins/nuxt-apollo-config.js',
  },
  defaultOptions: {
    $query: {
      loadingKey: 'loading',
      fetchPolicy: 'network-only',
    },
  },
  authenticationType: 'Bearer',
},

这是我的
nuxt-apollo-config.js file

import { setContext } from 'apollo-link-context'
import { from } from 'apollo-link'
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import { createHttpLink } from '@apollo/client/core'
import schema from '../apollo/schema.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: schema,
})

export default ({ app, $config: { baseUrlGraphql } }) => {
  const headersConfig = setContext(() => ({
    credentials: 'same-origin',
    headers: {
      Authorization: app.$cookies.get('auth._token.local'),
      'x-company-id': app.$cookies.get('company_id'),
    },
  }))

  const cache = new InMemoryCache({ fragmentMatcher, resultCaching: false })

  return {
    defaultHttpLink: false,
    link: from([
      headersConfig,
      createHttpLink({
        credentials: 'include',
        uri: baseUrlGraphql,
        fetch: (uri, options) => {
          return fetch(uri, options)
        },
      }),
    ]),
    cache,
  }
}

import {setContext}从'apollo-link-context'对我来说很好。我不确定这是最好的,因为现在可能有一些烘烤的东西,但是去年这对我有用。

I'm not at all a professional regarding GraphQL but last year, I've achieved something that works well (with a JWT header), here is what I had back at the time

nuxt.config.js

apollo: {
  clientConfigs: {
    default: '@/plugins/nuxt-apollo-config.js',
  },
  defaultOptions: {
    $query: {
      loadingKey: 'loading',
      fetchPolicy: 'network-only',
    },
  },
  authenticationType: 'Bearer',
},

and here is my
nuxt-apollo-config.js file

import { setContext } from 'apollo-link-context'
import { from } from 'apollo-link'
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import { createHttpLink } from '@apollo/client/core'
import schema from '../apollo/schema.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: schema,
})

export default ({ app, $config: { baseUrlGraphql } }) => {
  const headersConfig = setContext(() => ({
    credentials: 'same-origin',
    headers: {
      Authorization: app.$cookies.get('auth._token.local'),
      'x-company-id': app.$cookies.get('company_id'),
    },
  }))

  const cache = new InMemoryCache({ fragmentMatcher, resultCaching: false })

  return {
    defaultHttpLink: false,
    link: from([
      headersConfig,
      createHttpLink({
        credentials: 'include',
        uri: baseUrlGraphql,
        fetch: (uri, options) => {
          return fetch(uri, options)
        },
      }),
    ]),
    cache,
  }
}

import { setContext } from 'apollo-link-context' worked well for me. I'm not sure that it's the best because there is maybe something baked-in right now but this one worked for me last year.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文