From b7fc1ae4bb0aa03595d849d909b997c307dce26c Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Mon, 4 Nov 2024 20:33:41 +0100
Subject: [PATCH] fix: middleware fetch failed for docker container (#1424)

* fix: middleware fetch failed for docker container

* fix: lint warning
---
 apps/nextjs/src/middleware.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/middleware.ts b/apps/nextjs/src/middleware.ts
index b61cc6494..491d5b40a 100644
--- a/apps/nextjs/src/middleware.ts
+++ b/apps/nextjs/src/middleware.ts
@@ -1,10 +1,14 @@
 import type { NextRequest } from "next/server";
+import { createTRPCClient, httpLink } from "@trpc/client";
+import SuperJSON from "superjson";
 
-import { fetchApi } from "@homarr/api/client";
+import type { AppRouter } from "@homarr/api";
 import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 export async function middleware(request: NextRequest) {
-  const culture = await fetchApi.serverSettings.getCulture.query();
+  // fetch api does not work because window is not defined and we need to construct the url from the headers
+  // In next 15 we will be able to use node apis and such the db directly
+  const culture = await serverFetchApi.serverSettings.getCulture.query();
 
   // We don't want to fallback to accept-language header so we clear it
   request.headers.set("accept-language", "");
@@ -15,3 +19,17 @@ export async function middleware(request: NextRequest) {
 export const config = {
   matcher: ["/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)"],
 };
+
+export const serverFetchApi = createTRPCClient<AppRouter>({
+  links: [
+    httpLink({
+      url: `http://${process.env.HOSTNAME ?? "localhost"}:3000/api/trpc`,
+      transformer: SuperJSON,
+      headers() {
+        const headers = new Headers();
+        headers.set("x-trpc-source", "server-fetch");
+        return headers;
+      },
+    }),
+  ],
+});