fix: use hostname for suspense query url (#2187)

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -18,8 +18,8 @@ import superjson from "superjson";
 import type { SuperJSONResult } from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { clientApi, getTrpcUrl } from "@homarr/api/client";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
+import { clientApi } from "@homarr/api/client";
+import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 
 import { env } from "~/env";
 

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,6 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 import { appRouter, createTRPCContext } from "@homarr/api";
+import { trpcPath } from "@homarr/api/shared";
 import { auth } from "@homarr/auth/next";
 import { logger } from "@homarr/log";
 
@@ -25,7 +26,7 @@ export function OPTIONS() {
 
 const handler = auth(async (req) => {
   const response = await fetchRequestHandler({
-    endpoint: "/api/trpc",
+    endpoint: trpcPath,
     router: appRouter,
     req,
     createContext: () => createTRPCContext({ session: req.auth, headers: req.headers }),

apps/nextjs/src/middleware.ts

@@ -4,7 +4,7 @@ import { createTRPCClient, httpLink } from "@trpc/client";
 import SuperJSON from "superjson";
 
 import type { AppRouter } from "@homarr/api";
-import { createHeadersCallbackForSource } from "@homarr/api/shared";
+import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 export async function middleware(request: NextRequest) {
@@ -34,7 +34,7 @@ export const config = {
 export const serverFetchApi = createTRPCClient<AppRouter>({
   links: [
     httpLink({
-      url: `http://${process.env.HOSTNAME ?? "localhost"}:3000/api/trpc`,
+      url: getTrpcUrl(),
       transformer: SuperJSON,
       headers: createHeadersCallbackForSource("server-fetch"),
     }),