WIP

apps/website/src/layouts/index.tsx

@@ -14,15 +14,15 @@ export default function Layout({
   // TODO: Remove duplication of queries here.
   const data = useStaticQuery<FrameQuery>(graphql`
     query Frame {
-      mainNavigation {
+      mainNavigation: mainNavigations {
         ...Navigation
       }
-      footerNavigation {
+      footerNavigation: footerNavigations {
         ...Navigation
       }
     }
   `);
-  registerOperator(() => data, FrameQuery);
+  registerOperator(data, FrameQuery);
   return (
     <IntlProvider locale={locale || 'en'}>
       <Frame>{children}</Frame>

apps/website/src/templates/decap-page.tsx

@@ -45,7 +45,7 @@ export default function DecapPageTemplate({
   data,
   pageContext,
 }: PageProps<ViewPageQuery, SilverbackPageContext>) {
-  registerOperator(() => data, ViewPageQuery, {
+  registerOperator(data, ViewPageQuery, {
     id: pageContext.id,
     locale: pageContext.locale,
   });

apps/website/src/templates/drupal-page.tsx

@@ -53,7 +53,7 @@ export default function DrupalPageTemplate({
   data,
   pageContext,
 }: PageProps<PageTemplateQuery, SilverbackPageContext>) {
-  registerOperator(() => data, ViewPageQuery, {
+  registerOperator(data, ViewPageQuery, {
     id: pageContext.id,
     locale: pageContext.locale,
   });

packages/schema/src/operations/Frame.gql

@@ -1,8 +1,8 @@
 query Frame {
-  mainNavigation {
+  mainNavigation: mainNavigations {
     ...Navigation
   }
-  footerNavigation {
+  footerNavigation: mainNavigations {
     ...Navigation
   }
 }

packages/schema/src/operators.ts

@@ -16,7 +16,7 @@ type VariablesMatcher<OperationId extends AnyOperationId> =
   | ((vars: OperationVariables<OperationId>) => boolean);
 
 type RegistryEntry = {
-  operator: Operator<AnyOperationId>;
+  operator: Operator<AnyOperationId> | OperationResult<AnyOperationId>;
   id?: AnyOperationId;
   variables?: VariablesMatcher<OperationVariables<AnyOperationId>>;
 };
@@ -51,7 +51,7 @@ export function drupalOperator(endpoint: string) {
 }
 
 export function registerOperator<OperationId extends AnyOperationId>(
-  operator: Operator<OperationId>,
+  operator: Operator<OperationId> | OperationResult<OperationId>,
   id?: OperationId,
   variables?: VariablesMatcher<OperationVariables<OperationId>>,
 ) {
@@ -124,6 +124,9 @@ export function createOperator<OperationId extends AnyOperationId>(
     .pop();
 
   if (op) {
+    if (typeof op.operator !== 'function') {
+      return op.operator;
+    }
     return () => op.operator(id, variables);
   }
   throw new OperatorRegistryError(id, variables);

packages/schema/src/schema.graphql

@@ -98,7 +98,7 @@ type DrupalPage implements ContentHubResultItem & Page
   @type(id: "page") {
   id: ID! @resolveEntityUuid
   locale: Locale! @resolveEntityLanguage
-  translations: [Page] @resolveEntityTranslations
+  translations: [DrupalPage] @resolveEntityTranslations
   path: Url! @resolveEntityPath @isPath
   title: String! @resolveProperty(path: "title.value")
   teaserImage: MediaImage
@@ -167,9 +167,8 @@ input PaginationInput {
 type Query {
   previewDecapPage: Page
   previewDrupalPage(id: ID!, rid: ID, locale: String!): Page
-  mainNavigation: [MainNavigation] @gatsbyNodes(type: "MainNavigation")
-
-  footerNavigation: [FooterNavigation] @gatsbyNodes(type: "FooterNavigation")
+  mainNavigations: [MainNavigation] @gatsbyNodes(type: "MainNavigation")
+  footerNavigations: [FooterNavigation] @gatsbyNodes(type: "FooterNavigation")
 
   allPages: [Page] @gatsbyNodes(type: "Page")
   websiteSettings: WebsiteSettings

packages/ui/src/components/Organisms/Footer.stories.ts

@@ -2,16 +2,17 @@ import { FrameQuery, Locale, Navigation, Url } from '@custom/schema';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { buildOperator } from '../../helpers/operators';
-import { Footer } from './Footer';
+import { Footer as Component } from './Footer';
 
 export default {
-  component: Footer,
+  component: Component,
   parameters: {
     layout: 'fullscreen',
   },
-} satisfies Meta<typeof Footer>;
+  excludeStories: /^Fixture/,
+} satisfies Meta<typeof Component>;
 
-export const FooterNavigationExample: Navigation = {
+export const FixtureFooterNavigation: Navigation = {
   locale: Locale.En,
   items: [
     { title: 'About', target: '/about' as Url },
@@ -27,12 +28,12 @@ export const FooterNavigationExample: Navigation = {
   })),
 };
 
-export const Default = {
+export const Footer = {
   parameters: {
     operators: [
       buildOperator(FrameQuery, () => ({
-        footerNavigation: [FooterNavigationExample],
+        footerNavigation: [FixtureFooterNavigation],
       })),
     ],
   },
-} satisfies StoryObj<typeof Footer>;
+} satisfies StoryObj<typeof Component>;

packages/ui/src/components/Organisms/Footer.tsx

@@ -9,7 +9,7 @@ import { useOperation } from '../../utils/operation';
 function useFooterNavigation(lang: string = 'en') {
   return (
     useOperation(FrameQuery)
-      .data?.mainNavigation?.filter((nav) => nav?.locale === lang)
+      .data?.footerNavigation?.filter((nav) => nav?.locale === lang)
       .pop()
       ?.items.filter(isTruthy) || []
   );

packages/ui/src/components/Organisms/Header.stories.ts

@@ -3,16 +3,17 @@ import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { buildOperator } from '../../helpers/operators';
-import Header from './Header';
+import { Header } from './Header';
 
 export default {
   component: Header,
   parameters: {
     layout: 'fullscreen',
   },
+  excludeStories: /^Fixture/,
 } satisfies Meta<typeof Header>;
 
-export const MainNavigationExample: Navigation = {
+export const FixtureMainNavigation: Navigation = {
   locale: Locale.En,
   items: [
     {
@@ -50,18 +51,18 @@ export const MainNavigationExample: Navigation = {
   ],
 };
 
-export const Default = {
+export const Idle = {
   parameters: {
     operators: [
       buildOperator(FrameQuery, () => ({
-        mainNavigation: [MainNavigationExample],
+        mainNavigation: [FixtureMainNavigation],
       })),
     ],
   },
 } satisfies StoryObj<typeof Header>;
 
 export const Expanded: StoryObj<typeof Header> = {
-  ...Default,
+  ...Idle,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const navigation = within(

packages/ui/src/components/Organisms/Header.tsx

@@ -15,18 +15,18 @@ import {
   MobileMenuProvider,
 } from '../Client/MobileMenu';
 
-function useFooterNavigation(lang: string = 'en') {
+function useHeaderNavigation(lang: string = 'en') {
   return (
     useOperation(FrameQuery)
-      .data?.footerNavigation?.filter((nav) => nav?.locale === lang)
+      .data?.mainNavigation?.filter((nav) => nav?.locale === lang)
       .pop()
       ?.items.filter(isTruthy) || []
   );
 }
 
-export default function Header() {
+export function Header() {
   const intl = useIntl();
-  const items = buildNavigationTree(useFooterNavigation(intl.locale));
+  const items = buildNavigationTree(useHeaderNavigation(intl.locale));
 
   return (
     <MobileMenuProvider>

packages/ui/src/components/Routes/Frame.stories.ts

@@ -2,8 +2,8 @@ import { FrameQuery } from '@custom/schema';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { buildOperator } from '../../helpers/operators';
-import { FooterNavigationExample } from '../Organisms/Footer.stories';
-import { MainNavigationExample } from '../Organisms/Header.stories';
+import { FixtureFooterNavigation } from '../Organisms/Footer.stories';
+import { FixtureMainNavigation } from '../Organisms/Header.stories';
 import { Frame } from './Frame';
 
 export default {
@@ -17,8 +17,8 @@ export const Default = {
   parameters: {
     operators: [
       buildOperator(FrameQuery, () => ({
-        mainNavigation: [MainNavigationExample],
-        footerNavigation: [FooterNavigationExample],
+        mainNavigation: [FixtureMainNavigation],
+        footerNavigation: [FixtureFooterNavigation],
       })),
     ],
   },

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

@@ -2,7 +2,7 @@ import { AnimatePresence, useReducedMotion } from 'framer-motion';
 import React, { PropsWithChildren } from 'react';
 
 import { Footer } from '../Organisms/Footer';
-import Header from '../Organisms/Header';
+import { Header } from '../Organisms/Header';
 
 export function Frame(props: PropsWithChildren<{}>) {
   return (

packages/ui/src/utils/operation.ts

@@ -4,17 +4,27 @@ import {
   OperationResult,
   OperationVariables,
 } from '@custom/schema';
-import useSwr from 'swr';
+import useSwr, { SWRResponse } from 'swr';
 
 export function useOperation<TOperation extends AnyOperationId>(
   operation: TOperation,
   variables?: OperationVariables<TOperation>,
-) {
-  return useSwr<OperationResult<TOperation>>(
+): SWRResponse<OperationResult<TOperation>> {
+  const operator = createOperator(operation, variables);
+  const result = useSwr<OperationResult<TOperation>>(
     [operation, variables],
-    createOperator(operation, variables),
+    typeof operator === 'function' ? operator : null,
     {
       suspense: false,
     },
   );
+  return typeof operator === 'function'
+    ? result
+    : ({
+        data: operator,
+        error: undefined,
+        isValidating: false,
+        isLoading: false,
+        mutate: () => undefined as any,
+      } satisfies SWRResponse<OperationResult<TOperation>>);
 }