WIP

packages/ui/src/components/Routes/NotFoundPage.tsx

@@ -1,12 +1,9 @@
-'use client';
-import { NotFoundPageQuery, useLocalized } from '@custom/schema';
+import { NotFoundPageQuery, useLocalized, withOperation } from '@custom/schema';
 import React from 'react';
 
-import { useOperation } from '../../utils/operation';
 import { PageDisplay } from '../Organisms/PageDisplay';
 
-export function NotFoundPage() {
-  const { data } = useOperation(NotFoundPageQuery);
-  const page = useLocalized(data?.websiteSettings?.notFoundPage?.translations);
+export const NotFoundPage = withOperation(NotFoundPageQuery, ({operationResult}) => {
+  const page = useLocalized(operationResult.websiteSettings?.notFoundPage?.translations);
   return page ? <PageDisplay {...page} /> : <div />;
 }

packages/ui/src/components/Routes/Page.tsx

@@ -1,27 +1,36 @@
-'use client';
-import { useLocation, ViewPageQuery } from '@custom/schema';
+import { useLocation, ViewPageQuery, withOperation } from '@custom/schema';
 import React from 'react';
 
 import { isTruthy } from '../../utils/isTruthy';
-import { useOperation } from '../../utils/operation';
 import { Translations } from '../../utils/translations';
 import { PageDisplay } from '../Organisms/PageDisplay';
 
+export const PageWithData = withOperation(
+  ViewPageQuery,
+  ({ operationResult }) => {
+    // Initialize the language switcher with the options this page has.
+    const translations = Object.fromEntries(
+      operationResult?.page?.translations
+        ?.filter(isTruthy)
+        .map((translation) => [translation.locale, translation.path]) || [],
+    );
+    return operationResult?.page ? (
+      <Translations translations={translations}>
+        <PageDisplay {...operationResult.page} />
+      </Translations>
+    ) : null;
+  },
+);
+
 export function Page() {
   // Retrieve the current location and load the page
   // behind it.
   const [loc] = useLocation();
-  const { data } = useOperation(ViewPageQuery, { pathname: loc.pathname });
-
-  // Initialize the language switcher with the options this page has.
-  const translations = Object.fromEntries(
-    data?.page?.translations
-      ?.filter(isTruthy)
-      .map((translation) => [translation.locale, translation.path]) || [],
+  return (
+    <PageWithData
+      operationVariables={{
+        pathname: loc.pathname,
+      }}
+    />
   );
-  return data?.page ? (
-    <Translations translations={translations}>
-      <PageDisplay {...data.page} />
-    </Translations>
-  ) : null;
 }