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

web/src/components/venues/VenueIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { PageContent } from "@/components/general/PageContent";
 import { PageHeader } from "@/components/general/PageHeader";
 import { VenueList } from "@/components/venues/VenueList";
@@ -53,7 +54,7 @@ const VenueFragmentDefinition = graphql(`
   }
 `);
 
-export const venueIndexQuery = graphql(`
+const venueIndexQuery = graphql(`
   query venueIndex {
     index: venueIndex {
       ... on VenueIndex {
@@ -68,13 +69,23 @@ export const venueIndexQuery = graphql(`
   }
 `);
 
-export function VenueIndexView({
-  index,
-  venues,
-}: {
+export type VenueIndexViewProps = {
   index: VenueIndexFragment;
   venues: VenueFragment[];
-}) {
+};
+
+export async function loadVenueIndexProps(overrides?: {
+  indexOverride?: VenueIndexFragment;
+}): Promise<VenueIndexViewProps> {
+  const { data, error } = await getClient().query(venueIndexQuery, {});
+  if (error) throw new Error(error.message);
+  const index = overrides?.indexOverride ?? (data?.index as VenueIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /lokaler");
+  const venues = (data?.venues ?? []) as VenueFragment[];
+  return { index, venues };
+}
+
+export function VenueIndexView({ index, venues }: VenueIndexViewProps) {
   const visibleVenues = venues.filter((x) => x.showInOverview);
 
   return (