React router 7 SSR relative url support in fetch or any workaround

[gopal-freshwork]

Hi,

I’m working on a POC where I’ve developed a common API interface to handle API calls, along with interceptors to manage responses.

However, when making an API call, I currently need to use an absolute URL:

fetch("https://example.com/status")

We have multiple customer domain accounts, and based on the customer, we retrieve specific details. Because of this, we can’t use absolute URLs.

When I try using a relative URL:

fetch("/status")

I encounter the following error:

TypeError: Failed to parse URL from /status

I’ll be using this API interface in loaders, actions, and button click events, etc
• In loaders and actions, I have access to the request object, so I can retrieve the domain from it.
• However, in cases like button clicks or anywhere, I don’t have direct access to the request.

Is there a way to use relative URLs in this scenario, or any workaround to resolve this issue?

Eg:
Repo:
Loader request: https://github.com/gopal-freshwork/react-rr7-poc/blob/main/app/routes/home.tsx#L12
Button onClick API: https://github.com/gopal-freshwork/react-rr7-poc/blob/main/app/routes/home.tsx#L26
API client Host setting: https://github.com/gopal-freshwork/react-rr7-poc/blob/main/app/api/apiClient.ts#L7

[sergiodxa]

Server-side fetch can't have a relative URL because there's no context of what's the host, you could have to somehow tie the fetch with the request.url.

But instead of doing fetch to another route, which involves:

• serializing the request
• sending the request over the network
• parsing the request
• running the target route loader/action
• serializing the response
• sending the response over the network
• parsing the response

You could simplify all of that and call a function.

Create a function getStatusSettings, and call it everyone you need it, this will be simpler, more performant and remove completely the requirement for a relative fetch.

---

If you still want relative fetch support server-side, this needs to be added to Node.js and other server runtimes as fetch comes from the runtime and not the framework.