just like how you would do it with regular fetch

fetch("...", {
  headers: {
    'X-Username': 'fursund',
  }
})

Thanks. Can I do this with a server action as well?

as in, adding the header to the fetch internally executed when you call a server action? i'm afraid not... why do you need to do that?

you could just add the data as a function argument in the server action

Yes. Because some external libraries depend on certain headers being set

Could I override fetch and make this work?

You could try running some window.fetch = … somewhere and hope for the best, but I wouldn’t be too optimistic on this one.

But maybe you can try making a client side server action runner? Something like callServerAction(sendData, data) becoming sendData(token, data).

async callServerAction(action, …args) {
const token = getToken()
return action(token, …args)
}

A bit more work on typescript typing and you are good to go

How would that help me get specific headers set on the request?

You won’t. It won’t be a header. But you will be able to get the data in the server action, it’s simply the first argument passed to the server action

Ok perhaps there’s a way to set those headers inside the server action?

Hmm I think we are misunderstanding each other. You want to set custom header from the client for the server to read, or set custom response header from the server action and read it from the client?

Custom header from the client that the server needs to read

But it doesn’t have to be a header right? It just needs to be a way to send data that the server action can retrieve that data

The external server-side library expects a header set on the request object

you could bind the data you need to set on in your headers as part of your action and then use it in your server action
idk if that works in your case but seems it'll pretty well work

That would have to be done for every single action I do right? If I am using the library everywhere that is

well, if its not dynamic then why even need to pass it to it in the first place
You could just create a custom fetch logic and add the headers and reuse it anytime you need it

Its dynamic 🙂

Basically a dynamic auth token that gets fed in from client side via a header

what do you mean by dynamic auth token?

I mean it’s a header value that could change on every request

Oh okay
I get you
Then unfortunately, you might want to bind that data everytime you want to make a request

And is that doable by just overriding fetch? Or how do you do that bind?

I’m not sure I’m following. It’s your server, the library shouldn’t be able to automatically read the header, you have to provide the header to it, no? Or are you sending a request from the server action to another server?

I am trying to provide a custom header from the client side to a server action

Yes there’s an external library that will read from the headers and get the value from the custom header. This happens server side

So that library automatically calls headers() to retrieve the header, without you explicitly calling headers() anywhere?

Exactly

wow that's... absurd

unless you somehow succeed in monkey-patching fetch on the client, the only way to automatically patch the request is via cookies. all cookies are automatically sent