feat: configure directus url with dot env

.env

@@ -0,0 +1,3 @@
+SESSION_SECRET=CHANGEME
+DIRECTUS_HOST=localhost
+DIRECTUS_PORT=8055

.env.development

@@ -1 +0,0 @@
-SESSION_SECRET=CHANGEME

package-lock.json

@@ -17,6 +17,7 @@
         "autoprefixer": "^10.4.2",
         "cookie": "^0.5.0",
         "daisyui": "^2.14.3",
+        "dotenv": "^16.0.1",
         "postcss": "^8.4.6",
         "prettier": "^2.6.2",
         "solid-app-router": "^0.3.2",
@@ -2542,6 +2543,15 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "node_modules/dotenv": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+      "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6409,6 +6419,12 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "dotenv": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+      "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==",
+      "dev": true
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "autoprefixer": "^10.4.2",
     "cookie": "^0.5.0",
     "daisyui": "^2.14.3",
+    "dotenv": "^16.0.1",
     "postcss": "^8.4.6",
     "prettier": "^2.6.2",
     "solid-app-router": "^0.3.2",

src/entry-server.tsx

@@ -8,6 +8,8 @@ import { refreshAuthToken } from "./server/auth";
 import { createRefreshMiddleware } from "./util/refreshy";
 import { createRC } from "./util";
 
+(await import("dotenv")).config({ override: true });
+
 export default createHandler(
   createRefreshMiddleware((req, resHeaders) =>
     refreshAuthToken(createRC(req, resHeaders))

src/server/directus.ts

@@ -11,9 +11,83 @@ import { authExchange } from "@urql/exchange-auth";
 import { GraphQLError } from "graphql";
 import z, { Infer } from "myzod";
 
+const getHost = () => z.string().parse(process.env.DIRECTUS_HOST);
+const getPort = () =>
+  z
+    .bigint()
+    .parse(
+      process.env.DIRECTUS_PORT && Number.parseInt(process.env.DIRECTUS_PORT)
+    );
+const getGraphqlUrl = () => `http://${getHost()}:${getPort()}/graphql`;
+
 export const createDirectusSystemClient = () => {
   const client = createClient({
-    url: "http://localhost:8055/graphql/system",
+    url: getGraphqlUrl() + "/system",
+  });
+
+  return client;
+};
+
+export const createDirectusClient = (
+  session: Session,
+  onAuthError?: Function
+) => {
+  const client = createClient({
+    url: getGraphqlUrl(),
+    exchanges: [
+      authExchange({
+        getAuth: async ({ authState }) => {
+          if (!authState) {
+            const token = session.get("accessToken");
+            const refreshToken = session.get("refreshToken");
+            if (token && refreshToken) {
+              return { token, refreshToken };
+            }
+            return null;
+          }
+
+          return null;
+        },
+        addAuthToOperation: ({ authState, operation }: any) => {
+          if (!authState || !authState.token) {
+            return operation;
+          }
+
+          const fetchOptions =
+            typeof operation.context.fetchOptions === "function"
+              ? operation.context.fetchOptions()
+              : operation.context.fetchOptions || {};
+
+          return makeOperation(operation.kind, operation, {
+            ...operation.context,
+            fetchOptions: {
+              ...fetchOptions,
+              headers: {
+                ...fetchOptions.headers,
+                Authorization: `Bearer ${authState.token}`,
+              },
+            },
+          });
+        },
+      }),
+      errorExchange({
+        onError: async (error, o) => {
+          console.log("code", error.graphQLErrors[0].extensions.code);
+          console.log(error.graphQLErrors[0].extensions.graphqlErrors);
+          const isAuthError = error.graphQLErrors.some(
+            (e: GraphQLError) =>
+              ["TOKEN_EXPIRED", "FORBIDDEN"].indexOf(
+                e.extensions?.code as string
+              ) >= 0
+          );
+          console.log("isAuthError", isAuthError);
+          if (onAuthError && isAuthError) {
+            onAuthError();
+          }
+        },
+      }),
+      fetchExchange,
+    ],
   });
 
   return client;
@@ -111,68 +185,3 @@ export const logout = async (options: {
 
   return z.boolean().parse(result.data.auth_logout);
 };
-
-export const createDirectusClient = (
-  session: Session,
-  onAuthError?: Function
-) => {
-  const client = createClient({
-    url: "http://localhost:8055/graphql",
-    exchanges: [
-      authExchange({
-        getAuth: async ({ authState }) => {
-          if (!authState) {
-            const token = session.get("accessToken");
-            const refreshToken = session.get("refreshToken");
-            if (token && refreshToken) {
-              return { token, refreshToken };
-            }
-            return null;
-          }
-
-          return null;
-        },
-        addAuthToOperation: ({ authState, operation }: any) => {
-          if (!authState || !authState.token) {
-            return operation;
-          }
-
-          const fetchOptions =
-            typeof operation.context.fetchOptions === "function"
-              ? operation.context.fetchOptions()
-              : operation.context.fetchOptions || {};
-
-          return makeOperation(operation.kind, operation, {
-            ...operation.context,
-            fetchOptions: {
-              ...fetchOptions,
-              headers: {
-                ...fetchOptions.headers,
-                Authorization: `Bearer ${authState.token}`,
-              },
-            },
-          });
-        },
-      }),
-      errorExchange({
-        onError: async (error, o) => {
-          console.log("code", error.graphQLErrors[0].extensions.code);
-          console.log(error.graphQLErrors[0].extensions.graphqlErrors);
-          const isAuthError = error.graphQLErrors.some(
-            (e: GraphQLError) =>
-              ["TOKEN_EXPIRED", "FORBIDDEN"].indexOf(
-                e.extensions?.code as string
-              ) >= 0
-          );
-          console.log("isAuthError", isAuthError);
-          if (onAuthError && isAuthError) {
-            onAuthError();
-          }
-        },
-      }),
-      fetchExchange,
-    ],
-  });
-
-  return client;
-};