[Error] Orval Generation apiClient skip server side code

[talha-newcortex]

How can i disable server side code in orval mutator (api client)
I have login in my api-client for the serverside code, but I can't generate orval until i disable that line

The function being called is this

export const getToken = async () => {
  if (typeof window !== "undefined") {
    return {
      accessToken: Cookies.get("access_token"),
      refreshToken: Cookies.get("refresh_token"),
    };
  }

  // Server-side → MUST call per request (NO caching!!)
  const { cookies } = await import("next/headers");
  const cookieStore = await cookies();
  return {
    accessToken: cookieStore.get("access_token")?.value,
    refreshToken: cookieStore.get("refresh_token")?.value,
  };
};

I have to disable the server side code in order to run the orval.

Full Code:

import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import { toast } from "react-toastify";
import { redirect } from "next/navigation";
import Cookies from "js-cookie";
import { isServer } from "@tanstack/react-query";

const baseURL = process.env.NEXT_PUBLIC_API_URL;
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

// Axios instance
const axiosInstance = axios.create({ baseURL });

// Server-side cookie getter cache per request

export const getToken = async () => {
  if (typeof window !== "undefined") {
    return {
      accessToken: Cookies.get("access_token"),
      refreshToken: Cookies.get("refresh_token"),
    };
  }

  // Server-side → MUST call per request (NO caching!!)
  const { cookies } = await import("next/headers");
  const cookieStore = await cookies();
  return {
    accessToken: cookieStore.get("access_token")?.value,
    refreshToken: cookieStore.get("refresh_token")?.value,
  };
};

// Request interceptor
axiosInstance.interceptors.request.use(
  async (config) => {
    config.params = { ...config.params, key: apiKey };
    const { accessToken } = await getToken();

    if (accessToken) {
      config.headers["Authorization"] = config.headers["Authorization"] || accessToken;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.code === "ERR_NETWORK" || error.code === "ERR_BAD_RESPONSE") toast?.error?.("Network Error");

    const originalRequest = error.config;
    if (
      (error.status === 401 && error?.response?.data?.detail?.includes?.("Invalid or expired token")) ||
      error?.response?.data?.detail?.includes?.("No authentication token provided")
    ) {
      if (typeof window !== "undefined") {
        try {
          const refresh_token = (await getToken()).refreshToken;
          const res = await axios.post(
            `${baseURL}/api/auth/refresh-token`,
            {},
            {
              headers: {
                Authorization: refresh_token,
              },
              params: {
                key: apiKey,
              },
            }
          );
          if (res.data.success) {
            Cookies.set("access_token", res.data.access_token);
            Cookies.set("refresh_token", res.data.refresh_token);
            originalRequest.headers["Authorization"] = res.data.access_token;

            return axiosInstance.request(originalRequest);
          } else throw new Error("Refresh token failed to fetch");
        } catch (e) {
          console.error("Refresh token error:", e);
          Cookies.remove("access_token");
          Cookies.remove("refresh_token");
          window.location.href = "/";
        }
      } else {
        console.log("Running Refresh Token");

        try {
          const refresh_token = (await getToken()).refreshToken;

          const res = await axios.post(
            `${baseURL}/api/auth/refresh-token`,
            {},
            {
              headers: {
                Authorization: refresh_token,
              },
              params: {
                key: apiKey,
              },
            }
          );

          if (res.data.success) {
            originalRequest.headers["Authorization"] = res.data.access_token;
            return axiosInstance.request(originalRequest);
          }
        } catch (e) {
          console.error("Refresh token error:", e);
        }

        return redirect("/");
      }
    }

    return Promise.reject(error);
  }
);

// Export Axios request wrapper
export const apiClient = <TData = unknown, TVariables = unknown>(
  config: AxiosRequestConfig<TVariables>
): Promise<AxiosResponse<TData>> => axiosInstance.request<TData>(config);

export default axiosInstance;

Error:

npx orval
🍻 orval v7.17.0 - A swagger client generator for typescript
[WARN] Using query options is deprecated and will be removed in a future major release. Please use queryOptions or mutationOptions instead.
🛑 fastapi - Error: Your mutator file doesn't have the apiClient exported function
    at generateMutator (/home/syntist/Documents/napa-frontend/node_modules/@orval/core/dist/index.js:2689:27)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async generateVerbOptions (/home/syntist/Documents/napa-frontend/node_modules/@orval/core/dist/index.js:3099:18)
    at async /home/syntist/Documents/napa-frontend/node_modules/@orval/core/dist/index.js:3168:23
    at async asyncReduce (/home/syntist/Documents/napa-frontend/node_modules/@orval/core/dist/index.js:503:41)
    at async api.operations (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:230:22)
    at async asyncReduce (/home/syntist/Documents/napa-frontend/node_modules/@orval/core/dist/index.js:503:41)
    at async getApiBuilder (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:218:14)
    at async importOpenApi (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:299:14)
    at async generateSpec (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:1287:27)
/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:1316
        if (hasErrors) throw new Error("One or more project failed, see above for details");
                             ^

Error: One or more project failed, see above for details
    at generateSpecs (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:1316:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Object.generateConfig (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/generate-ByPJel4j.js:1357:2)
    at async Command.<anonymous> (/home/syntist/Documents/napa-frontend/node_modules/orval/dist/bin/orval.js:46:9)
    at async Command.parseAsync (/home/syntist/Documents/napa-frontend/node_modules/orval/node_modules/commander/lib/command.js:1122:5)

Node.js v24.9.0

[ismaildasci]

the issue is orval runs at build time in node environment where next/headers is not available (its only available in server components at runtime).

few options to fix this:

1. separate your mutator into client-only and server-only versions:

client mutator:

// client-mutator.ts
export const getToken = () => {
  return {
    accessToken: Cookies.get("access_token"),
    refreshToken: Cookies.get("refresh_token"),
  };
};

then use only the client mutator for orval generation.

2. use dynamic import with try-catch:

export const getToken = async () => {
  if (typeof window !== "undefined") {
    return {
      accessToken: Cookies.get("access_token"),
      refreshToken: Cookies.get("refresh_token"),
    };
  }

  try {
    const { cookies } = await import("next/headers");
    const cookieStore = await cookies();
    return {
      accessToken: cookieStore.get("access_token")?.value,
      refreshToken: cookieStore.get("refresh_token")?.value,
    };
  } catch {
    // orval build time - return empty tokens
    return { accessToken: undefined, refreshToken: undefined };
  }
};

3. in your orval config, point to a different mutator file that doesnt have server code:

// orval.config.js
mutator: {
  path: "./src/api/client-only-mutator.ts",
  name: "customInstance"
}

4. use environment check:

const isOrvalBuild = process.env.ORVAL_BUILD === "true";

export const getToken = async () => {
  if (isOrvalBuild) {
    return { accessToken: undefined, refreshToken: undefined };
  }
  // rest of your code
};

then run: ORVAL_BUILD=true npx orval