web: centralize prop fetching for live + preview, fix preview banner breakage

web/src/components/events/EventIndexView.tsx

@@ -1,20 +1,48 @@
 import { Suspense } from "react";
 import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
 import { PageHeader } from "@/components/general/PageHeader";
-import { EventCategory, EventFragment, EventOrganizer } from "@/lib/event";
+import {
+  EventCategory,
+  EventFragment,
+  EventOrganizer,
+  eventsOverviewQuery,
+} from "@/lib/event";
+
+export type EventIndexViewProps = {
+  events: EventFragment[];
+  eventCategories: EventCategory[];
+  eventOrganizers: EventOrganizer[];
+  venues: VenueFragment[];
+};
+
+export async function loadEventIndexProps(): Promise<EventIndexViewProps> {
+  const { data, error } = await getClient().query(eventsOverviewQuery, {});
+  if (error) throw new Error(error.message);
+  if (
+    !data?.index ||
+    !data?.events?.futureEvents ||
+    !data?.eventCategories ||
+    !data?.eventOrganizers ||
+    !data?.venues
+  ) {
+    throw new Error("Failed to load /arrangementer");
+  }
+  return {
+    events: data.events.futureEvents as EventFragment[],
+    eventCategories: data.eventCategories as EventCategory[],
+    eventOrganizers: data.eventOrganizers as EventOrganizer[],
+    venues: data.venues as VenueFragment[],
+  };
+}
 
 export function EventIndexView({
   events,
   eventCategories,
   eventOrganizers,
   venues,
-}: {
-  events: EventFragment[];
-  eventCategories: EventCategory[];
-  eventOrganizers: EventOrganizer[];
-  venues: VenueFragment[];
-}) {
+}: EventIndexViewProps) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading="Dette skjer på Chateau Neuf" align="left" />