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

web/src/components/venues/VenuePageView.tsx

@@ -1,4 +1,5 @@
 import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import {
   ImageSliderBlock,
   ImageSliderBlockFragmentDefinition,
@@ -9,7 +10,7 @@ import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql, unmaskFragment } from "@/gql";
 
-export const venueBySlugQuery = graphql(`
+const venueBySlugQuery = graphql(`
   query venueBySlug($slug: String!) {
     venue: page(contentType: "venues.VenuePage", slug: $slug) {
       ... on VenuePage {
@@ -19,7 +20,26 @@ export const venueBySlugQuery = graphql(`
   }
 `);
 
-export function VenuePageView({ venue }: { venue: VenueFragment }) {
+export type VenuePageViewProps = { venue: VenueFragment };
+
+export async function loadVenuePageProps(args: {
+  slug?: string;
+  venueOverride?: VenueFragment;
+}): Promise<VenuePageViewProps | null> {
+  if (args.venueOverride) {
+    return { venue: args.venueOverride };
+  }
+  if (!args.slug) throw new Error("loadVenuePageProps needs slug or venueOverride");
+  const { data, error } = await getClient().query(venueBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const venue = data?.venue as VenueFragment | undefined;
+  if (!venue) return null;
+  return { venue };
+}
+
+export function VenuePageView({ venue }: VenuePageViewProps) {
   return (
     <main className="site-main" id="main">
       {venue.images?.[0]?.__typename === "ImageSliderBlock" && (