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"),
     }),

packages/api/src/client.ts

@@ -5,7 +5,7 @@ import { createTRPCReact } from "@trpc/react-query";
 import SuperJSON from "superjson";
 
 import type { AppRouter } from ".";
-import { createHeadersCallbackForSource } from "./shared";
+import { createHeadersCallbackForSource, getTrpcUrl } from "./shared";
 
 export const clientApi = createTRPCReact<AppRouter>();
 export const fetchApi = createTRPCClient<AppRouter>({
@@ -17,16 +17,3 @@ export const fetchApi = createTRPCClient<AppRouter>({
     }),
   ],
 });
-
-function getBaseUrl() {
-  if (typeof window !== "undefined") return window.location.origin;
-  return `http://localhost:${process.env.PORT ?? 3000}`;
-}
-
-/**
- * Creates the full url for the trpc api endpoint
- * @returns
- */
-export function getTrpcUrl() {
-  return `${getBaseUrl()}/api/trpc`;
-}

packages/api/src/shared.ts

@@ -36,3 +36,18 @@ async function importCookiesAsync() {
     .map(({ name, value }) => `${name}=${value}`)
     .join(";");
 }
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return window.location.origin;
+  return `http://${process.env.HOSTNAME ?? "localhost"}:3000`;
+}
+
+export const trpcPath = "/api/trpc";
+
+/**
+ * Creates the full url for the trpc api endpoint
+ * @returns
+ */
+export function getTrpcUrl() {
+  return `${getBaseUrl()}${trpcPath}`;
+}