Could this same seam for modifying headers be achieved with a turbo:before-fetch-request event listener?

addEventListener("turbo:before-fetch-request", ({ detail: { fetchOptions }) => fetchOptions.headers["..."] = "..."))

Changing headers with turbo:before-fetch-request event listener will work fine for the simpler case when you need to add some static header to Turbo requests. Unfortunately, with Shopify embedded apps you need to retrieve the JWT token before every request because the token lifetime is short and we don't know exactly when it's expired inside the Turbo app. JWT token retrieval is async and we need to pause Turbo's fetch request invocation until it's done. So async interceptor works best for this complex case. I used Axios interceptors as an inspiration for this approach.

@kirillplatonov Nice work on this PR! Great that we won't need to fetch JWT every x seconds with your setRequestInterceptor solution and rather ask for them just when we need them. 👍

Until it's merged I published my fork to npm:

yarn add turbo-edge
import * as Turbo from "turbo-edge"

yarn add turbo-rails-edge
import { Turbo } from "turbo-rails-edge"

Great stuff @kirillplatonov. Could you add some documentation for this on https://turbo.hotwire.dev/reference/drive? It's in the turbo-site repo. Thanks!

Great stuff @kirillplatonov. Could you add some documentation for this on https://turbo.hotwire.dev/reference/drive? It's in the turbo-site repo. Thanks!

Added documentation here: hotwired/turbo-site#53

Thanks for getting this through @kirillplatonov @dhh - useful for JWT / Shopify apps!

@kirillplatonov Upon further reflection, I think it might be worth exploring an approach similar to #28 (comment). Which basically let's the turbo:before-fetch-request pause the request. Then we could do it all in a callback instead.

@dhh having the same pausable API for both turbo:before-render and turbo:before-fetch-request would be great. I will explore this.