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

web/src/components/news/NewsPageView.tsx

@@ -1,11 +1,12 @@
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
 import { PageContent } from "@/components/general/PageContent";
 import { formatDate } from "@/lib/date";
 
-export const newsBySlugQuery = graphql(`
+const newsBySlugQuery = graphql(`
   query newsBySlug($slug: String!) {
     news: page(contentType: "news.NewsPage", slug: $slug) {
       ... on NewsPage {
@@ -15,7 +16,26 @@ export const newsBySlugQuery = graphql(`
   }
 `);
 
-export function NewsPageView({ news }: { news: NewsFragment }) {
+export type NewsPageViewProps = { news: NewsFragment };
+
+export async function loadNewsPageProps(args: {
+  slug?: string;
+  newsOverride?: NewsFragment;
+}): Promise<NewsPageViewProps | null> {
+  if (args.newsOverride) {
+    return { news: args.newsOverride };
+  }
+  if (!args.slug) throw new Error("loadNewsPageProps needs slug or newsOverride");
+  const { data, error } = await getClient().query(newsBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const news = data?.news as NewsFragment | undefined;
+  if (!news) return null;
+  return { news };
+}
+
+export function NewsPageView({ news }: NewsPageViewProps) {
   const featuredImage: any = news.featuredImage;
   return (
     <main className="site-main" id="main">