web: colocate graphql fragments, unmask where needed, more idiomatic client-preset use

web/src/lib/event.ts

@@ -8,21 +8,48 @@ import {
   parseISO,
 } from "date-fns";
 import { toLocalTime, formatDate, compareDates } from "./date";
-import { graphql } from "@/gql";
-import { EventFragment, EventOccurrence } from "@/gql/graphql";
+import { graphql, unmaskFragment } from "@/gql";
+import {
+  type EventCategoryFragment,
+  type EventFragment,
+  type EventOrganizerFragment,
+} from "@/gql/graphql";
 import { PIG_NAMES, randomElement } from "@/lib/common";
 
-export type {
-  EventFragment,
-  EventCategory,
-  EventOccurrence,
-  EventOrganizer,
-} from "@/gql/graphql";
+export type EventOccurrence = EventFragment["occurrences"][number];
+export type EventCategory = EventCategoryFragment;
+export type EventOrganizer = EventOrganizerFragment;
+export type { EventFragment };
 
 export type SingularEvent = EventFragment & {
   occurrence: EventOccurrence;
 };
 
+export const EventCategoryFragmentDefinition = graphql(`
+  fragment EventCategory on EventCategory {
+    __typename
+    name
+    slug
+    pig
+    showInFilters
+  }
+`);
+
+export const EventOrganizerFragmentDefinition = graphql(`
+  fragment EventOrganizer on EventOrganizer {
+    __typename
+    id
+    name
+    slug
+    externalUrl
+    association {
+      ... on AssociationPage {
+        url
+      }
+    }
+  }
+`);
+
 const EventFragmentDefinition = graphql(`
   fragment Event on EventPage {
     __typename
@@ -48,9 +75,7 @@ const EventFragmentDefinition = graphql(`
     priceStudent
     categories {
       ... on EventCategory {
-        name
-        slug
-        pig
+        ...EventCategory
       }
     }
     occurrences(limit: 5000) {
@@ -72,15 +97,7 @@ const EventFragmentDefinition = graphql(`
     }
     organizers {
       ... on EventOrganizer {
-        id
-        name
-        slug
-        externalUrl
-        association {
-          ... on AssociationPage {
-            url
-          }
-        }
+        ...EventOrganizer
       }
     }
   }
@@ -125,16 +142,12 @@ export const eventsOverviewQuery = graphql(`
     }
     eventCategories: eventCategories(limit: 5000) {
       ... on EventCategory {
-        name
-        slug
-        showInFilters
+        ...EventCategory
       }
     }
     eventOrganizers: eventOrganizers(limit: 5000) {
       ... on EventOrganizer {
-        id
-        name
-        slug
+        ...EventOrganizer
       }
     }
     venues: pages(contentType: "venues.VenuePage") {
@@ -270,7 +283,11 @@ export function getEventPig(event: EventFragment): string | null {
     return event.pig;
   }
   if (event.pig === "automatic") {
-    const categoryPigs = event.categories
+    const categories = unmaskFragment(
+      EventCategoryFragmentDefinition,
+      event.categories
+    );
+    const categoryPigs = categories
       ?.map((category) => category.pig)
       .filter((pig) => PIG_NAMES.includes(pig));
     const chosenPig = randomElement(categoryPigs ?? []);