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

web/src/components/associations/AssociationIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { AssociationList } from "@/components/associations/AssociationList";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
@@ -40,7 +41,7 @@ const AssociationFragmentDefinition = graphql(`
   }
 `);
 
-export const allAssociationsQuery = graphql(`
+const allAssociationsQuery = graphql(`
   query allAssociations {
     index: associationIndex {
       ... on AssociationIndex {
@@ -58,13 +59,27 @@ export const allAssociationsQuery = graphql(`
   }
 `);
 
+export type AssociationIndexViewProps = {
+  index: AssociationIndexFragment;
+  associations: AssociationFragment[];
+};
+
+export async function loadAssociationIndexProps(overrides?: {
+  indexOverride?: AssociationIndexFragment;
+}): Promise<AssociationIndexViewProps> {
+  const { data, error } = await getClient().query(allAssociationsQuery, {});
+  if (error) throw new Error(error.message);
+  const index =
+    overrides?.indexOverride ?? (data?.index as AssociationIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /foreninger");
+  const associations = (data?.associations ?? []) as AssociationFragment[];
+  return { index, associations };
+}
+
 export function AssociationIndexView({
   index,
   associations,
-}: {
-  index: AssociationIndexFragment;
-  associations: AssociationFragment[];
-}) {
+}: AssociationIndexViewProps) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />

web/src/components/associations/AssociationPageView.tsx

@@ -1,9 +1,10 @@
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { AssociationHeader } from "@/components/associations/AssociationHeader";
 import { PageContent } from "@/components/general/PageContent";
 
-export const associationBySlugQuery = graphql(`
+const associationBySlugQuery = graphql(`
   query associationBySlug($slug: String!) {
     association: page(
       contentType: "associations.AssociationPage"
@@ -16,11 +17,26 @@ export const associationBySlugQuery = graphql(`
   }
 `);
 
-export function AssociationPageView({
-  association,
-}: {
-  association: AssociationFragment;
-}) {
+export type AssociationPageViewProps = { association: AssociationFragment };
+
+export async function loadAssociationPageProps(args: {
+  slug?: string;
+  associationOverride?: AssociationFragment;
+}): Promise<AssociationPageViewProps | null> {
+  if (args.associationOverride) {
+    return { association: args.associationOverride };
+  }
+  if (!args.slug) throw new Error("loadAssociationPageProps needs slug or associationOverride");
+  const { data, error } = await getClient().query(associationBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const association = data?.association as AssociationFragment | undefined;
+  if (!association) return null;
+  return { association };
+}
+
+export function AssociationPageView({ association }: AssociationPageViewProps) {
   return (
     <main className="site-main" id="main">
       <AssociationHeader association={association} />