Dynamic baseUrl (Next.js monorepo)

[mihalcinD]

Hi community 👋

I've been using openpi-ts for a few days now and I love it! But I have come to a problem in my monorepo setup.

TL;DR

What would be the best approach to dynamically handle baseUrl (and maybe other options) per request?

I have monorepo with "api" package where I have generated client, sdk, ... with the default baseUrl. In one of my Next.js app I need to set baseUrl from header per request.

So I created runtimeConfig where I set config from the getter method.

import { Config, CreateClientConfig } from '@hey-api/client-fetch';

type GetClientConfig = () => Config;

let getClientConfig: GetClientConfig = () => {
  return {
    baseUrl: 'https://acme.com/api/',
  };
};

export const setGetClientConfig = (getConfig: GetClientConfig) => {
  getClientConfig = getConfig;
};

export const createClientConfig: CreateClientConfig = config => {
  return {
    ...config,
    ...getClientConfig(),
  };
};

And then in middleware.ts / root layout I'm updating getter method with a proper baseUrl.

  const apiBaseUrl = requestHeaders.get('api-url');

  setGetClientConfig(() => ({ baseUrl: apiBaseUrl || undefined }));

Problem is that client is initialized with a default getter, so it will never use updated getter. What will be the best approach to handle this? I also tried to set baseUrl with .setConfig() but still no luck.

[mrlubos]

Is the issue happening in SSR or when running on the client?

[mihalcinD]

With my solution, issue was in both. When I used .setConfig() in root layout, SSR worked fine, but client used default url. Also I'm not sure if it's better to set it in middleware or rootlayout 🤔 Btw. thanks for the fast reply 🥇

[mrlubos]

Hmm I don't have a definitive answer but are you able to use any of these SSR approaches to pass the URL in context to the client code?