Server-side fetch with relative URLs

[dtinth]

It would be great if Remix supported relative URLs when doing a fetch() from the server-side, like SvelteKit.

In SvelteKit, you can make a fetch() request on the server using a relative URL. It allows sending a request API routes on the same project, but without the overhead of an actual HTTP call.

In Remix,

TypeError: Invalid URL
    at new NodeError (node:internal/errors:393:5)
    at URL.onParseError (node:internal/url:565:9)
    at new URL (node:internal/url:645:5)
    at new Request (/Users/dtinth/ghq/github.com/creatorsgarten/contentsgarten/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/request.js:78:16)
    at /Users/dtinth/ghq/github.com/creatorsgarten/contentsgarten/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/fetch.js:42:19
    at new Promise (<anonymous>)
    at AsyncFunction.fetch (/Users/dtinth/ghq/github.com/creatorsgarten/contentsgarten/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/fetch.js:40:9)
    at fetch (/Users/dtinth/ghq/github.com/creatorsgarten/contentsgarten/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/node/dist/fetch.js:44:19)

Why?

The project I’m building exposes both API routes and a UI routes. The API part accesses many 3rd party services (database, cloud providers, APIs, auth provider).

Ideally, the loaders in the UI routes will invoke 3rd party services through the API routes.

Setting up local versions of these services can take a lot of work, especially if my task is to tweak some frontend. So I wanted to make it possible for developers to work on just the frontend part while connecting to a production backend.

Developers can choose to either run the front end against the same instance, or connect to the production instance (or any other instance).

In SvelteKit, this is easy because a fetch() call accepts relative URL. However in Remix it’s not clear what the URL should be, especially when it’s deployed to a serverless provider.

I tried constructing an absolute URL from request.url, however on Netlify this results in the lambda function calling itself, which means it costs twice and there is double the overhead.

[sergiodxa]

I'm unconvinced this is something Remix should support, I understand the benefit but this goes against the standard of how fetch works, and if what you want is to share code between two routes the simplest way is to export a function

// app/services/get-items.ts
export async function getItems(args: GetItemsArgs): Promise<GetItemsResult> { ... }

// app/routes/api.items.ts
export async function loader({ request }: DataFunctionArgs) {
  await authorizeFromHeaders(request.headers);
  let argsFromRequest = extractArgsFromRequest()
  let items = await getItems(argsFromRequest)
  return json(items)
}

// app/routes/items.tsx
export async function loader({ request }: DataFunctionArgs) {
  await authorizeFromCookies(request);
  let argsFromRequest = extractArgsFromRequest()
  let items = await getItems(argsFromRequest)
  let anotherThing = await getAnotherThing(argsFromRequest)
  return json({
    items: reduceItemsDataToMinimum(items), // remove parts of items that UI doesn't need
    anotherThing
  })
}

export default function Component() {
  let { items, anotherThing } = useLoaderData<typeof loader>()
  // render ui using items and anotherThing
}

[dtinth]

this goes against the standard of how fetch works

In browsers fetch does support a relative URL.

Both WhatWG and WinterCG shows a lot of relative URLs being used:

Therefore I fail to see how supporting relative URLs “goes against the standard.” Can you elaborate more?

if what you want is to share code between two routes the simplest way is to export a function

Yes, I want to share code, but not only that, I also want to make it possible for a loader to invoke a backend hosted in production.

• If process.env.BACKEND_URL is present, the loader should make a request to that backend.
• If process.env.BACKEND_URL is blank, the loader should load the data from API routes defined on the same server.

By using function calls, it would look like this:

  // Since I cannot use relative URLs here I have to handle these 2 cases separately.
  let items = process.env.BACKEND_URL
    ? await fetch(process.env.BACKEND_URL + '/api.items', { /* ... */ })
         .then(response => { /* ... handle errors, parse response ... */ }
    : await getItems(argsFromRequest)

But with relative URL support it will be much simpler:

  // When `BACKEND_URL` is blank we have a relative URL, and it will invoke the API on the dev server.
  // When `BACKEND_URL` is present, we have an absolute URL, and it will invoke the API on the remote server.
  let items = await fetch(`${process.env.BACKEND_URL || ''}/api.items`, { /* ... */ })
    .then(response => { /* ... handle errors, parse response ... */ }

[sergiodxa]

this goes against the standard of how fetch works

Because as far as I understood you, your proposal and what SveltKit does is that if you call fetch("/api/items") instead of doing a network request it will do a function call to the loader of the route matching /api/items

Fetch does a network call, not a function call, if this is implemented it would change the semantics of what Fetch does when using it server-side in Remix.