addRequestTransform + addAsyncRequestTransform fail to fire immediately after browser refresh.

I’m using apisauce in a web-based project and am noticing some unexpected behaviour in the api call immediately after a browser refresh. It seems that addRequestTransform or addAsyncRequestTransform do not stick in that scenario. Using 0.14.1.

Code below - It should look remarkably familiar. 😄

const create = () => {
  // ------
  // STEP 1
  // ------
  //
  // Create and configure an apisauce-based api object.
  //
  const api = apisauce.create({
    // base URL is read from the "constructor"
    baseURL,
    // here are some default headers
    headers: {
      accept: 'application/vnd.api+json',
      'content-type': 'application/vnd.api+json'
    },
    // 10 second timeout...
    timeout: 10000
  })

  api.addAsyncRequestTransform(request => async () => {
    api.setHeader('awesome-async-dude', 'Steve Kellock')
  })

  api.addRequestTransform(request => {
    api.setHeader('awesome-sync-dude', 'Gant Laborde')
  })

I’m looking on my back end and I can see that the headers are not set in the request immediately following the browser refresh, but from the next request onwards, they are present (both awesome-async-dude and awesome-sync-dude).

Strangely enough, If I console.log out the activity I see that both the methods are called during processing of all requests, but I am unsure of the order that they actually resolve (thanks, sync processing).

Is this weird, or have I missed something somewhere along the line?

PS. I’ve simplified the headers I am setting with the transform in an attempt to isolate the problem - I removed an async call to get an auth token, which makes far more sense!

[skellock]

api.addAsyncRequestTransform(request => async () => {
    api.setHeader('awesome-async-dude', 'Steve Kellock')
     request.headers[‘awesome-async-dude’] = ‘Steve Kellock’ // change the current request too
  })

Does something like that work?

[skellock]

Ya, it’s an awkward interface. Sorry for the confusion.