Setting Custom Header in Apollo Client

[piyush-multiplexer]

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'

Vue.use(VueApollo)

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

// Config
const defaultOptions = {
// You can use https for secure connection (recommended in production)
httpEndpoint,
// You can use wss for secure connection (recommended in production)
// Use null to disable subscriptions
wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
// LocalStorage token
tokenName: AUTH_TOKEN,
// Enable Automatic Query persisting with Apollo Engine
persisting: false,
// Use websockets for everything (no HTTP)
// You need to pass a wsEndpoint for this to work
websocketsOnly: false,
// Is being rendered on the server?
ssr: false,

// Override default apollo link
// note: don't override httpLink here, specify httpLink options in the
// httpLinkOptions property of defaultOptions.
// link: myLink

// Override default cache
// cache: myCache

// Override the way the Authorization header is set
// getAuth: (tokenName) => ...

// Additional ApolloClient options
// apollo: { ... }

// Client local data (see apollo-link-state)
// clientState: { resolvers: { ... }, defaults: { ... } }
}

// Call this in the Vue app file
export function createProvider (options = {}) {
// Create apollo client
const { apolloClient, wsClient } = createApolloClient({
...defaultOptions,
...options,
})
apolloClient.wsClient = wsClient

// Create vue apollo provider
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$query: {
// fetchPolicy: 'cache-and-network',
},
},
errorHandler (error) {
// eslint-disable-next-line no-console
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
},
})

return apolloProvider
}

Here how can i set custom header in graphql for apollo like 'x-hasura-custom-header'

[joe-re]

@piyush-multiplexer
You can set headers as context. Please refer this.
https://www.apollographql.com/docs/link/links/http/#context

[piyush-multiplexer]

Actually i found a way with different approach within setContext for headers

[Aztriltus]

Actually i found a way with different approach within setContext for headers

Are you able to show what you've done? Trying to set Hasura header to my Vue app but can't seem to figure out where setContext is supposed to be used when using Vue CLI Apollo.

EDIT
Managed to do it. So if you used Vue CLI Apollo to install, you might not find this setContext thing anywhere. There is little to no documentation on this. Not sure what is the best way and I experimented a little and did this.

// in vue-apollo.js
import { HttpLink } from 'apollo-link-http';

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

const httpLink = new HttpLink({
  uri: httpEndpoint,
  headers: {
    'x-hasura-admin-secret': your_key_here
  }
})

const defaultOptions = {
  httpEndpoint,
  wsEndpoint: null,
  // ...

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  link: httpLink

And if you check your browser's Network devtool, your graphql queries have headers now!

[Mei152]

Here is an easier way that worked for me: Akryum/vue-cli-plugin-apollo#47 (comment)

@Aztriltus In your case, the below code would probably work:

const defaultOptions = {
  httpEndpoint,
  httpLinkOptions: {
    headers: {
      'x-hasura-admin-secret': your_key_here
    }
  },
  wsEndpoint: null,
  // ...

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  // link: httpLink

[piyush-multiplexer]

This is how i did wih setContext.

import { HttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
const httpLink = new HttpLink({
uri: process.env.VUE_APP_GRAPHQL_HTTP,
})
const authLink = setContext((_, { headers }) => {
// return the headers to the context so httpLink can read them
return {
headers: {
...headers,
'X-Hasura-Admin-Secret': 'you-secret'
},
}
})
// And same with WebSocket and after that split both link and combine in ApolloClient

Actually i found a way with different approach within setContext for headers

Are you able to show what you've done? Trying to set Hasura header to my Vue app but can't seem to figure out where setContext is supposed to be used when using Vue CLI Apollo.

EDIT
Managed to do it. So if you used Vue CLI Apollo to install, you might not find this setContext thing anywhere. There is little to no documentation on this. Not sure what is the best way and I experimented a little and did this.

// in vue-apollo.js
import { HttpLink } from 'apollo-link-http';

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

const httpLink = new HttpLink({
  uri: httpEndpoint,
  headers: {
    'x-hasura-admin-secret': your_key_here
  }
})

const defaultOptions = {
  httpEndpoint,
  wsEndpoint: null,
  // ...

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  link: httpLink

And if you check your browser's Network devtool, your graphql queries have headers now!

This is how i did wih setContext.

import { HttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
const httpLink = new HttpLink({
  uri: process.env.VUE_APP_GRAPHQL_HTTP,
})
const authLink = setContext((_, { headers }) => {
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,    
       'X-Hasura-Admin-Secret':  'you-secret'
    },
  }
})

// And same with WebSocket and after that split both link and combine in ApolloClient

[eizemazal]

Never do that unless your frontend is only accessible by trusted administrators.

//your js file
headers: { 'x-hasura-admin-secret': your_key_here }

You are exposing your x-hasura-admin-secret to anyone who is able to reach your Vue application. Anonymous user is able to extract it from webpacked code, bypass authentication whatever it is, and execute arbitrary queries and mutations against your GraphQL API.

You should never pass x-hasura-admin-secret to your frontend, and have to use JWT authentication by implementing backend or 3rd party auth service.