Set headers after client creation, or per request?

Hope this is not too much of an edge case:

Trying to use Villus in a Vuex store module in a Nuxt app.

This works, if I do not need to pass Authorization headers:

// myStoreModule.js
import { createClient } from 'villus'

const client = createClient({
  url: 'http://localhost:4000/graphql'
})
// ...
export const actions = {
  async fetchData({ commit, dispatch }) {
    const data = await client.executeQuery({
      query: BOARD_QUERY
    })
    commit('SET_BOARD', data)
  }
}

However, I do need to pass Authorization headers. But in the Vuex store, I can only access the original headers from the http.request object inside of actions. Therefore, I cannot do:

const client = createClient({
  url: 'http://localhost:4000/graphql',
  context: () => {
    return {
      fetchOptions: {
        headers: {
          Authorization: TOKEN
        }
      }
    };
  }
})

…because I do not have access to TOKEN outside of my actions.

Therefore, I would like to do something like this:

export const actions = {
  async fetchData({ commit, dispatch }, { req }) {
	// first get TOKEN from original request
    const token = getToken(req.headers)
	// the set the token to the previously created client
    client.context = () => {
      return {
        fetchOptions: {
          headers: {
            Authorization: TOKEN
          }
        }
      }
    }
	//...
}

But this does not work. So, how would you go around this issue?

With Axios, I could easily modify the headers on each request. Would something like that be possible with Villus client?

[logaretm]

Your method should work, I’m not sure about the problem. I’m overhauling the extension API, I haven’t settled yet on the final draft but It looks like this:

client.beforeFetch(({ headers }) => {
  headers.Authorization = 'Bearer ....';
});

client.afterFetch(({ response }) => {
  // Do something with the response.
});

My goals are to allow retries, caching, error handling with simple API like that.

[altitudems]

I would like to add to this request by asking that the context function support promises. This way we could first get an access token asynchronously, and then update headers and execute the query.