Nuxt appolo module How to send authorization header?

Question

I try to use nux.js with apollo. I have to send an authorization header.In my nuxt.config.js Itry this :

    apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://graphql.fauna.com/graphql',
        headers: {
          Authorization: 'Bearer xxxxxx'
        }
      }
    }
  }

But I have this error when try to make a query:

"GraphQL error: Missing authorization header".

How can I send the header ?

Best regards

Answer 1

i used package called ‍‍‍js-cookie and

const token = Cookies.get('tokenName')

headers: {
           Authorization: token ? `Bearer ${token}` : ''
}

and i think it worked for me

Answer 2

If you store your token in cookie, you can use tokenName property for specifying name of your token cookie:

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'https://graphql.fauna.com/graphql',
      tokenName: 'NAME_OF_TOKEN_COOKIE'
    }
  }
}

It automatically attaches value from cookie to authentication header in apollo requests.

Answer 3

Been seeing this error with websockets setup (with lazy and reconnect set to true), though might be relevant.

The reason was that after logout, header.authorization was set to null, which was wrong, the whole header should've been set to null:

// Return header if token set, else - null
const getHeaders = () => {
  const token = store.getters[AuthS.extGetToken]
  if (!token) return null

  return { authorization: `Bearer ${token}` }
}

// Create a WebSocket link:
const link = new WebSocketLink({
  uri: config.backendUrl,

  options: {
    reconnect: true,
    lazy: true,
    timeout: 30000,
    connectionParams: () => {
      return { headers: getHeaders() }
    }
}