I have an app that queries GraphQL at domain.com/gql_endpoint to render page.tsx. I don't want the client to know the domain so I'm using a route handler in my app at app/api/gql/route.ts to forward the req.

I can't seem to call fetch on my new route handler? If I do fetch("/api/gql", ...) I get a TypeError: Failed to parse URL from /api/gql.

Searching online, I see that fetch doesn't work with relative urls if it's called on the server/from a server component but putting "use client" at the top of the file it doesn't seem to do anything and I still get the TypeError even though I think I'm in a client context. I'm using relay for GraphQL so the structure is like:

relayEnvironment.ts

"use client"

const RelayEnvironmentProvider = ({
  children,
}) => {
  ...
};

const createRelayEnvironment = () => {
  const store = new Store(new RecordSource());
  return new Environment({
    network: Network.create(fetchQuery),
    store,
  });
};

const fetchQuery = async (
  operation: RequestParameters,
  variables: Variables
) => {
  const response = await fetch(
    `/api/gql`,  // this errors
    ...
  );
  return response;
};

Other online research suggests that I should make the fetch call to my final api directly domain.com/gql_endpoint but I don't really want to expose that to the client.

I have also tried absolute urls like http://localhost:3000/api/gql in that fetch call but then I run into the issue of not being able to access the server since I haven't started it yet (since I'm still building it).

I tried to turn off static rendering for my page using export dynamic = "force-dynamic" it still seems to try to pre-render and hit the fetch for the internal endpoint while building.

I'm kind of at a loss of what to do or if I'm just thinking about this all wrong xD