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

web/src/lib/openinghours.ts

@@ -1,19 +1,18 @@
 import {
-  startOfToday,
-  isAfter,
-  getISODay,
-  parseISO,
-  isSameDay,
   compareDesc,
+  getISODay,
+  isAfter,
+  isSameDay,
+  parseISO,
+  startOfToday,
 } from "date-fns";
 
-import { graphql } from "@/gql";
-import {
-  OpeningHoursRangeBlock,
-  OpeningHoursSet,
-  OpeningHoursWeekBlock,
-} from "@/gql/graphql";
 import { getClient } from "@/app/client";
+import { graphql, unmaskFragment } from "@/gql";
+import type {
+  OpeningHoursRangeBlockFragment as OpeningHoursRangeBlock,
+  OpeningHoursSetFragment as OpeningHoursSet,
+} from "@/gql/graphql";
 
 const MISSING_OPENING_HOURS = {
   name: "Åpningstider mangler",
@@ -45,7 +44,7 @@ const WEEKDAYS_NORWEGIAN = [
 const openingHoursQuery = graphql(`
   query openingHoursSets {
     openingHoursSets {
-      ...OpeningHoursSetFragment
+      ...OpeningHoursSet
     }
   }
 `);
@@ -79,7 +78,7 @@ export async function getOpeningHours() {
   }
   // pick the set that msot recently took effect
   return validSets.sort((a, b) =>
-    compareDesc(a.effectiveFrom, b.effectiveFrom)
+    compareDesc(a.effectiveFrom, b.effectiveFrom),
   )[0];
 }
 
@@ -93,7 +92,7 @@ type OpeningHoursGroup = {
 type OpeningHoursPerDay = Record<string, OpeningHoursRangeBlock>;
 
 export function groupOpeningHours(
-  week: OpeningHoursPerDay
+  week: OpeningHoursPerDay,
 ): OpeningHoursGroup[] {
   const grouped: OpeningHoursGroup[] = [];
   let previous: string | null = null;
@@ -132,7 +131,7 @@ export type PrettyOpeningHours = {
 };
 
 function formatGroupedHours(
-  grouped: OpeningHoursGroup[]
+  grouped: OpeningHoursGroup[],
 ): PrettyOpeningHours[] {
   return grouped.map((group) => {
     const startDayIndex = WEEKDAYS.indexOf(group.days[0]);
@@ -160,19 +159,26 @@ function formatGroupedHours(
 
 export function getOpeningHoursForFunction(
   openingHours: OpeningHoursSet,
-  name: string
+  name: string,
 ) {
   const item = openingHours.items?.find((x) => x?.function === name);
   if (!item || !Array.isArray(item?.week) || item?.week.length !== 1) {
     return;
   }
-  const week = item.week[0] as OpeningHoursWeekBlock;
+  const maskedWeek = item.week[0];
+  if (maskedWeek?.__typename !== "OpeningHoursWeekBlock") {
+    return;
+  }
+  const week = unmaskFragment(
+    OpeningHoursWeekBlockFragmentDefinition,
+    maskedWeek,
+  );
   return week;
 }
 
 export function getPrettyOpeningHoursForFunction(
   openingHours: OpeningHoursSet,
-  name: string
+  name: string,
 ) {
   const week = getOpeningHoursForFunction(openingHours, name);
   if (!week) {
@@ -194,7 +200,7 @@ export function getPrettyOpeningHoursForFunction(
 
 export function getTodaysOpeningHoursForFunction(
   openingHours: OpeningHoursSet,
-  name: string
+  name: string,
 ): string {
   const week: any = getOpeningHoursForFunction(openingHours, name);
   if (!week) {
@@ -213,7 +219,7 @@ export function getTodaysOpeningHoursForFunction(
 }
 
 const OpeningHoursSetFragmentDefinition = graphql(`
-  fragment OpeningHoursSetFragment on OpeningHoursSet {
+  fragment OpeningHoursSet on OpeningHoursSet {
     name
     effectiveFrom
     effectiveTo
@@ -222,8 +228,7 @@ const OpeningHoursSetFragmentDefinition = graphql(`
       id
       function
       week {
-        id
-        blockType
+        __typename
         ... on OpeningHoursWeekBlock {
           ...OpeningHoursWeekBlock
         }
@@ -240,7 +245,7 @@ const OpeningHoursRangeBlockFragmentDefinition = graphql(`
   }
 `);
 
-const OpeningHoursWeekBlockFragmentDefinition = graphql(`
+export const OpeningHoursWeekBlockFragmentDefinition = graphql(`
   fragment OpeningHoursWeekBlock on OpeningHoursWeekBlock {
     monday {
       ... on OpeningHoursRangeBlock {