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

web/src/app/arrangementer/[slug]/page.tsx

@@ -1,64 +1,50 @@
-import { gql } from "@apollo/client";
+import { graphql } from "@/gql";
+import { EventFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
+import { Blocks } from "@/components/blocks/Blocks";
 
 export async function generateStaticParams() {
-  const query = gql(`
-  {
-    pages(contentType: "events.EventPage") {
-      id
-      slug
+  const allEventSlugsQuery = graphql(`
+    query allEventSlugs {
+      pages(contentType: "events.EventPage") {
+        id
+        slug
+      }
     }
-  }
-   `);
-  const { data } = await getClient().query({
-    query: query,
-  });
+  `);
+  const { data } = await getClient().query(allEventSlugsQuery);
 
-  return data.pages.map((page: any) => ({
+  return data?.pages.map((page: any) => ({
     slug: page.slug,
   }));
 }
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const query = gql(`
-  query ($slug: String!) {
-    event: page(contentType: "events.EventPage", slug: $slug) {
-      id
-      slug
-      title
-      ... on EventPage {
-        body {
-          id
-          blockType
+  const eventBySlugQuery = graphql(`
+    query eventBySlug($slug: String!) {
+      event: page(contentType: "events.EventPage", slug: $slug) {
+        ... on EventPage {
+          ...Event
         }
       }
     }
-  }
-   `);
+  `);
 
-  //   const response = await getClient()
-  //     .query({
-  //       query: query,
-  //       variables: { slug: params.slug },
-  //     })
-  //     .then()
-  //     .catch((e) => console.error(e.networkError.result.errors));
-
-  const { data } = await getClient().query({
-    query: query,
-    variables: { slug: params.slug },
+  const { data } = await getClient().query(eventBySlugQuery, {
+    slug: params.slug,
   });
 
-  const { event } = data;
+  const event = (data?.event ?? {}) as EventFragment;
+
+  console.log("event", event);
 
   return (
     <main className="site-main" id="main">
       <section className="page-header">
-        <h1>Et enkeltarrangement</h1>
-        <p>!!</p>
+        <h1>{event.title}</h1>
       </section>
       <section className="page-content">
-        <div key={event.id}>{event.title}</div>
+        <Blocks blocks={event.body} />
       </section>
     </main>
   );

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>
   );
 }

web/src/app/client.ts

@@ -1,11 +1,11 @@
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
-import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
+import { cacheExchange, createClient, fetchExchange } from "@urql/core";
+import { registerUrql } from "@urql/next/rsc";
 
-export const { getClient } = registerApolloClient(() => {
-  return new ApolloClient({
-    cache: new InMemoryCache(),
-    link: new HttpLink({
-      uri: "https://cms.neuf.kult.444.no/api/graphql/",
-    }),
+const makeClient = () => {
+  return createClient({
+    url: process.env.GRAPHQL_ENDPOINT ?? "",
+    exchanges: [cacheExchange, fetchExchange],
   });
-});
+};
+
+export const { getClient } = registerUrql(makeClient);

web/src/app/page.tsx

@@ -1,12 +1,25 @@
+import { graphql } from "@/gql";
+import {EventFragment} from "@/gql/graphql"
+import { getClient } from "@/app/client";
 import { EventList } from "@/components/events/EventList";
 import { Body } from "@/components/general/Body";
 import Image from "next/image";
 
-export default function Home() {
+export default async function Home() {
+  const homeQuery = graphql(`
+    query home {
+      events: pages(contentType: "events.EventPage") {
+        ...Event
+      }
+    }
+  `);
+  const { data, error } = await getClient().query(homeQuery, {});
+  const events = (data?.events ?? []) as EventFragment[]
+
   return (
     <main className="site-main" id="main">
       <div>
-        <EventList />
+        <EventList events={events} />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
         <p className="lead">
           Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.