web: start using graphql-codegen, switch to urql, use graphql data a few places

web/src/app/arrangementer/page.tsx

@@ -1,41 +1,53 @@
-import { gql } from "@apollo/client";
+import { graphql } from "@/gql";
+import { EventFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { EventList } from "@/components/events/EventList";
 
+const EventFragmentDefinition = graphql(`
+  fragment Event on EventPage {
+    __typename
+    id
+    slug
+    title
+    body {
+      id
+      blockType
+      field
+      ... on RichTextBlock {
+        rawValue
+        value
+      }
+    }
+    featuredImage {
+      src
+    }
+    facebookUrl
+    ticketUrl
+    priceRegular
+    priceMember
+    priceRegular
+  }
+`);
+
 export default async function Page() {
-  const query = gql(`
-    {
-        pages(contentType: "events.EventPage") {
-          id
-          slug
-          title
-          ... on EventPage {
-            body {
-              id
-              blockType
-            }
-          }
+  const allEventsQuery = graphql(`
+    query allEvents {
+      events: pages(contentType: "events.EventPage") {
+        ... on EventPage {
+          ...Event
         }
       }
-   `);
-  const { data } = await getClient().query({
-    query: query,
-  });
+    }
+  `);
+  const { data, error } = await getClient().query(allEventsQuery, {});
+  const events = (data?.events ?? []) as EventFragment[]
 
   return (
     <main className="site-main" id="main">
       <section className="page-header">
         <h1>Arrangementer</h1>
-        <p>woo</p>
       </section>
-      {data.pages && (
-        <section className="page-content">
-          {data.pages.map((event) => (
-            <div key={event.id}>{event.title}</div>
-          ))}
-        </section>
-      )}
-      <EventList />
+      <EventList events={events} />
     </main>
   );
 }