Add env vars for API urls

Author: barisgit

apps/web/.env.example

@@ -1,6 +1,10 @@
 # Database
 DATABASE_URL=postgresql://user:password@localhost:5432/nextwiki
 
+# API
+NEXT_PUBLIC_API_URL=http://localhost:3000/api/trcp
+NEXT_PUBLIC_WS_URL=
+
 # NextAuth
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=your-32-character-secret-key-goes-here

apps/web/src/env.ts

@@ -30,7 +30,8 @@ export const env = createEnv({
     NEXT_PUBLIC_NODE_ENV: z
       .enum(["development", "production"])
       .default("development"),
-    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_API_URL: z.string().url(),
+    NEXT_PUBLIC_WS_URL: z.string().url().optional(),
   },
 
   /**
@@ -50,6 +51,8 @@ export const env = createEnv({
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
     OVERRIDE_MAX_LOG_LEVEL: process.env.OVERRIDE_MAX_LOG_LEVEL,
     PROCESS_ORIGIN: process.env.PROCESS_ORIGIN,
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL,
     // Client-side env vars
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },

apps/web/src/server/providers.tsx

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { createWSClient, httpBatchLink, wsLink, splitLink } from "@trpc/client";
 import { createTRPCClient } from "@trpc/client";
 import { AppRouter } from "./routers";
+import { env } from "~/env";
 
 function makeQueryClient() {
   return new QueryClient({
@@ -39,27 +40,39 @@ function getQueryClient() {
 }
 
 export function TRPCClientProvider({ children }: PropsWithChildren) {
-  const wsClient = createWSClient({
-    url: "ws://localhost:3001",
-  });
   const queryClient = getQueryClient();
-  const [trpcClient] = useState(() =>
-    createTRPCClient<AppRouter>({
-      links: [
-        splitLink({
-          condition(op) {
-            return op.type === "subscription";
-          },
-          true: wsLink({
-            client: wsClient,
-          }),
-          false: httpBatchLink({
-            url: "http://localhost:3000/api/trpc",
+
+  const [trpcClient] = useState(() => {
+    if (env.NEXT_PUBLIC_WS_URL) {
+      const wsClient = createWSClient({
+        url: `ws://${env.NEXT_PUBLIC_WS_URL}`,
+      });
+
+      return createTRPCClient<AppRouter>({
+        links: [
+          splitLink({
+            condition(op) {
+              return op.type === "subscription";
+            },
+            true: wsLink({
+              client: wsClient,
+            }),
+            false: httpBatchLink({
+              url: `${env.NEXT_PUBLIC_API_URL}/api/trpc`,
+            }),
           }),
+        ],
+      });
+    }
+
+    return createTRPCClient<AppRouter>({
+      links: [
+        httpBatchLink({
+          url: `${env.NEXT_PUBLIC_API_URL}/api/trpc`,
         }),
       ],
-    })
-  );
+    });
+  });
 
   return (
     <QueryClientProvider client={queryClient}>