resolved build error; graphql codegen

frontend/app/form-tutor/ui/table/columns.tsx

@@ -0,0 +1,48 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { TutorFormEventsQuery } from "@/lib/gql/generated/graphql";
+
+export const columns: ColumnDef<TutorFormEventsQuery['events'][0]>[] = [
+  {
+    accessorKey: "isSelected",
+    header: "",
+    cell: ({ row }) => (
+      <div className="w-full flex flex-row justify-center">
+        <Checkbox
+          className={"mx-auto"}
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Ich kann diese Vorlesung halten"
+        />
+      </div>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: () => <div className="text-left">Veranstaltung</div>,
+  },
+  {
+    accessorKey: "from",
+    header: () => <div className="text-left">Datum</div>,
+    cell: ({ row }) => {
+      const date = new Date(row.getValue('from'));
+      return date.toLocaleDateString();
+    }
+  },
+  {
+    accessorKey: "from",
+    header: () => <div className="text-left">Von</div>,
+    cell: ({ row }) => {
+      const time = new Date(row.getValue('from'));
+      return time.toLocaleTimeString();
+    }
+  },
+  {
+    accessorKey: "to",
+    header: () => <div className="text-left">Bis</div>,
+    cell: ({ row }) => {
+      const time = new Date(row.getValue('to'));
+      return time.toLocaleTimeString();
+    }
+  },
+];

frontend/app/form-tutor/ui/table/data-table.tsx

@@ -1,82 +1,78 @@
 "use client"
 
 import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from "@tanstack/react-table"
 
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from "@/components/ui/table"
 
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[]
+interface DataTableProps<TData> {
+  columns: ColumnDef<TData>[]
+  data: TData[]
 }
 
-const scrollable = "w-full h-30 overflow-scroll"
-
-export function DataTable<TData, TValue>({
-    columns,
+export function DataTable<TData>({
+  columns,
+  data,
+}: DataTableProps<TData>) {
+  const table = useReactTable({
     data,
-}: Readonly<DataTableProps<TData, TValue>>) {
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-    });
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
 
-    return (
-        <div className="rounded-md border-2">
-            <Table>
-                <TableHeader>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                return (
-                                    <TableHead key={header.id}>
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                    </TableHead>
-                                )
-                            })}
-                        </TableRow>
-                    ))}
-                </TableHeader>
-                <TableBody>
-                    {table.getRowModel().rows?.length ? (
-                        table.getRowModel().rows.map((row) => (
-                            <TableRow
-                                key={row.id}
-                                data-state={row.getIsSelected() && "selected"}
-                            >
-                                {row.getVisibleCells().map((cell) => (
-                                    <TableCell key={cell.id}>
-                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                    </TableCell>
-                                ))}
-                            </TableRow>
-                        ))
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                No results.
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
-        </div>
-    )
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
 }

frontend/app/form-tutor/ui/table/table.tsx

@@ -1,28 +1,19 @@
-import { columns } from "../../../../lib/columns"
-import { DataTable } from "./data-table"
-import { client } from "@/lib/graphClient"
-import { GET_EVENTS } from "@/lib/queries"
-import { Veranstaltungen, Vorlesung } from "@/lib/definitions"
-
-async function getData(): Promise<Vorlesung[]> {
-    const jsonData : Veranstaltungen = await client.request(GET_EVENTS);
-
-    const vorlesungen: Vorlesung[] = jsonData.events.map(event => ({
-        id: event.ID,
-        title: event.title,
-        date: new Date(event.from).toLocaleDateString(),
-        time: new Date(event.from).toLocaleTimeString() + " - " + new Date(event.to).toLocaleTimeString()
-    }));
-
-    return vorlesungen;
-}
+import { columns } from "./columns";
+import { DataTable } from "./data-table";
+import { client } from "@/lib/graphClient";
+import {
+  TutorFormEventsQuery,
+  TutorFormEventsDocument,
+} from "@/lib/gql/generated/graphql";
 
 export default async function EventTable() {
-    const data = await getData()
+  const data = await client.request<TutorFormEventsQuery>(
+    TutorFormEventsDocument
+  );
 
-    return (
-        <div className="w-fill mx-auto">
-            <DataTable columns={columns} data={data}/>
-        </div>
-    )
+  return (
+    <div className="w-fill mx-auto">
+      <DataTable columns={columns} data={data.events} />
+    </div>
+  );
 }

frontend/codegen.ts

@@ -0,0 +1,15 @@
+
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: "../server/graph/schema.graphqls",
+  documents: "lib/**/*.graphql",
+  generates: {
+    "lib/gql/generated/": {
+      preset: "client",
+    }
+  }
+};
+
+export default config;

frontend/lib/gql/generated/fragment-masking.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | undefined
+): TType | undefined;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null
+): TType | null;
+// return nullable if `fragmentType` is nullable or undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
+): Array<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): Array<TType> | null | undefined;
+// return readonly array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return readonly array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}