Change apollo graphql client headers after user login

[ghosteye1]

Hi, I'm working on an app that needed to set auth token header after the user login. I noticed apollo client-initiated before the app. So is there a way to change heders after the certain view is loaded?

[stefanvanherwijnen]

Have a look at vuejs/apollo#713.
You could use LocalStorage to set and get your header. I believe apollo (re)sets the header upon every request.

[ghosteye1]

I'm already using it this way. It works if I only refresh again.

link.js
`import { HttpLink } from 'apollo-link-http'
import { split } from 'apollo-link'
import { getMainDefinition } from 'apollo-utilities'
import absintheSocketLink from './absinthe-socket-link'

const uri = ${window.location.origin}/api/graphql

const httpLink = new HttpLink({
uri: uri,
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})

const link = split(
// split based on operation type
({ query }) => {
const definition = getMainDefinition(query)
return definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
},
absintheSocketLink,
httpLink
)

export { link }
`

in apollo-client-hooks.js

`
import { link } from './link'

export async function apolloClientBeforeCreate ({ apolloClientConfigObj } /* { apolloClientConfigObj, app, router, store, ssrContext, urlPath, redirect } */) {
apolloClientConfigObj.link = link
}

export async function apolloClientAfterCreate ({ apolloClient, app, router, store, ssrContext, urlPath, redirect } */) {

}
`

[rhscjohn-dev]

I just added token support to my Quasar version 1.0 app using Apollo Client version 3.0. This is my boot file (apolloClient.js) for Apollo client. Hope this helps.

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core'
import { setContext } from '@apollo/client/link/context'
import VueApollo from 'vue-apollo'

// We are using Window.localStorage API for token
const httpLink = new HttpLink({ uri: ${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql })
const auth = setContext((_, { headers }) => {
// add the authorization to the headers
if (localStorage.getItem('token')) {
const token = localStorage.getItem('token')
if (token !== '') {
return {
headers: {
...headers,
authorization: token ? Bearer ${token} : ''
}
}
}
}
})
// Create the apollo client
const apolloClient = new ApolloClient({
link: auth.concat(httpLink),
cache: new InMemoryCache({
// typePolicies: {
// PlaybackPosition: {
// keyFields: ['filename']
// }
// }
}),
connectToDevTools: process.env.DEV,
name: 'quasar-web-client',
defaultOptions: {
watchQuery: {
fetchPolicy: 'no-cache',
errorPolicy: 'ignore'
},
query: {
fetchPolicy: 'no-cache',
errorPolicy: 'all'
},
mutate: {
fetchPolicy: 'no-cache',
errorPolicy: 'all'
}
}
})

const apolloProvider = new VueApollo({
defaultClient: apolloClient
})

export { apolloProvider }

All of my graphql requests are done in Vuex. So the at the top of my store file (auth.js) I have

`
import { apolloProvider } from 'boot/apolloClient'
import { Notify } from 'quasar'
import { REGISTER_USER } from 'src/graphql/mutations/registerUser.graphql'
import { LOGIN } from 'src/graphql/mutations/login.graphql'

const gqlClient = apolloProvider.defaultClient`