Infrastructure to read API version to ui from api

ui/src/api/index.ts

@@ -0,0 +1,29 @@
+import { query } from "@solidjs/router";
+
+const API_BASE_URL = process.env.API_BASE_URL ?? "http://localhost:5013";
+
+const buildUrl = (path: string) =>
+  `${API_BASE_URL.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+
+async function fetchApi<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(buildUrl(path), {
+    ...init,
+    headers: {
+      "content-type": "application/json",
+      ...(init?.headers ?? {}),
+    },
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`API ${response.status}: ${text || response.statusText}`);
+  }
+
+  return (await response.json()) as T;
+}
+
+export const queryApiVersion = query(async () => {
+  "use server";
+  const data = await fetchApi<{ version: string }>("/");
+  return data.version;
+}, "api-version");

ui/src/routes/about.tsx

@@ -1,18 +1,20 @@
 import { Title } from "@solidjs/meta";
+import { createAsync } from "@solidjs/router";
+import { Show } from "solid-js";
 import Counter from "~/components/Counter";
+import { queryApiVersion } from "~/api";
 
 export default function About() {
+  const apiVersion = createAsync(() => queryApiVersion());
+
   return (
     <main>
-      <Title>About Page</Title>
-      <h1 class="text-center">About Page</h1>
-      <Counter />
+      <Title>Tietoja</Title>
       <p class="text-gray-700 text-center">
-        Visit{" "}
-        <a href="https://start.solidjs.com" target="_blank" class="text-sky-600 hover:underline">
-          start.solidjs.com
-        </a>{" "}
-        to learn more on SolidStart
+        API version:{" "}
+        <Show when={apiVersion()} fallback="Loading...">
+          {apiVersion()}
+        </Show>
       </p>
     </main>
   );