Make backend and frontend work together well, and add datasets/ page to frontend

frontend/src/lib/server/backend.ts

@@ -0,0 +1,49 @@
+type GraphQLResponse<T> = {
+  data?: T;
+  errors?: Array<{
+    message: string;
+    locations?: { line: number; column: number }[];
+    path?: string[];
+  }>;
+};
+
+export type Dataset = {
+  id: number;
+  name: string;
+  description: string;
+};
+
+export async function list_datasets(): Promise<Dataset[]> {
+  const query = `
+    query {
+      datasets {
+        id
+        name
+        description
+      }
+    }
+  `;
+
+  const response = await fetch('http://host.containers.internal:3000/graphql', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ query }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error - status ${response.status}`);
+  }
+
+  const result = await response.json() as GraphQLResponse<{
+    datasets: Dataset[];
+  }>;
+
+  if (result.errors) {
+    throw new Error(result.errors.map(e => e.message).join(', '));
+  }
+
+  return result.data!.datasets;
+}
+

frontend/src/routes/datasets/+page.server.ts

@@ -0,0 +1,9 @@
+import * as backend from '$lib/server/backend';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+  const datasets: backend.Dataset[] = await backend.list_datasets()
+  return {
+    datasets
+  };
+};

frontend/src/routes/datasets/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+
+  let { data }: PageProps = $props();
+</script>
+
+<ul>
+  {#each data.datasets as dataset}
+    <li>
+      <strong>{dataset.name}</strong><br />
+      {dataset.description}
+    </li>
+  {/each}
+</ul>