WIP

apps/website/src/layouts/index.tsx

@@ -1,57 +1,55 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { NavigationFragment } from '@custom/schema';
+import {
+  FooterQuery,
+  FrameQuery,
+  HeaderQuery,
+  registerOperator,
+} from '@custom/schema';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
 import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby';
 import React, { PropsWithChildren } from 'react';
 
-function useFrameQuery() {
-  return useStaticQuery<{
-    main_de: NavigationFragment;
-    main_en: NavigationFragment;
-    footer_de: NavigationFragment;
-    footer_en: NavigationFragment;
-  }>(graphql`
+export default function Layout({
+  children,
+  pageContext: { locale },
+}: PropsWithChildren<
+  WrapPageElementNodeArgs<any, SilverbackPageContext>['props']
+>) {
+  // TODO: Remove duplication of queries here.
+  const data = useStaticQuery<FrameQuery>(graphql`
     query Frame {
-      main_de: mainNavigation(_langcode: { eq: "de" }) {
+      main_en: mainNavigation(locale: "en") {
         ...Navigation
       }
-      main_en: mainNavigation(_langcode: { eq: "en" }) {
-        items {
-          ...NavigationItem
-        }
+      main_de: mainNavigation(locale: "de") {
+        ...Navigation
       }
-      footer_de: footerNavigation(_langcode: { eq: "de" }) {
-        items {
-          ...NavigationItem
-        }
+      footer_de: footerNavigation(locale: "de") {
+        ...Navigation
       }
-      footer_en: footerNavigation(_langcode: { eq: "en" }) {
-        items {
-          ...NavigationItem
-        }
+      footer_en: footerNavigation(locale: "en") {
+        ...Navigation
       }
     }
   `);
-}
-
-export default function Layout({
-  children,
-  pageContext: { locale },
-}: PropsWithChildren<
-  WrapPageElementNodeArgs<any, SilverbackPageContext>['props']
->) {
-  const data = useFrameQuery();
   const main = locale === 'de' ? data.main_de : data.main_en;
   const footer = locale === 'de' ? data.footer_de : data.footer_en;
+  registerOperator(
+    () => ({
+      mainNavigation: main,
+    }),
+    HeaderQuery,
+  );
+  registerOperator(
+    () => ({
+      footerNavigation: footer,
+    }),
+    FooterQuery,
+  );
   return (
     <IntlProvider locale={locale || 'en'}>
-      <Frame
-        header={{ mainNavigation: main }}
-        footer={{ footerNavigation: footer }}
-      >
-        {children}
-      </Frame>
+      <Frame>{children}</Frame>
     </IntlProvider>
   );
 }

packages/schema/src/operations/Footer.gql

@@ -1,5 +1,5 @@
-query Footer {
-  footerNavigation {
+query Footer($locale: String!) {
+  footerNavigation(locale: $locale) {
     ...Navigation
   }
 }

packages/schema/src/operations/Frame.gql

@@ -0,0 +1,14 @@
+query Frame {
+  main_en: mainNavigation(locale: "en") {
+    ...Navigation
+  }
+  main_de: mainNavigation(locale: "de") {
+    ...Navigation
+  }
+  footer_en: footerNavigation(locale: "en") {
+    ...Navigation
+  }
+  footer_de: footerNavigation(locale: "de") {
+    ...Navigation
+  }
+}

packages/schema/src/operations/Header.gql

@@ -1,5 +1,5 @@
-query Header {
-  mainNavigation {
+query Header($locale: String!) {
+  mainNavigation(locale: $locale) {
     ...Navigation
   }
 }

packages/schema/src/operations/ViewPage.gql

@@ -0,0 +1,5 @@
+query ViewPage($id: ID!, $rid: ID!, $locale: String!) {
+  page(id: $id, rid: $rid, locale: $locale) {
+    ...Page
+  }
+}

packages/schema/src/schema.graphql

@@ -2,6 +2,11 @@ scalar Url @default @value(json: "\"\"")
 scalar Markup @default @value(json: "\"\"")
 scalar ImageSource @default @value(json: "\"\"")
 
+"""
+implementation(gatsby): @custom/schema#fetchNavigation
+"""
+directive @fetchNavigation(type: String!, locale: String!) on FIELD_DEFINITION
+
 enum Locale @default @value(json: "\"en\"") {
   en
   de
@@ -127,8 +132,15 @@ input PaginationInput {
 }
 
 type Query {
-  previewPage(id: ID!, rid: ID, locale: String!): Page
+  mainNavigation(locale: String!): MainNavigation
+    @fetchNavigation(type: "MainNavigation", locale: "$locale")
+
+  footerNavigation(locale: String!): FooterNavigation
+    @fetchNavigation(type: "FooterNavigation", locale: "$locale")
+
+  page(id: ID!, rid: ID, locale: String!): Page
     @fetchEntity(type: "node", id: "$id", rid: "$rid", language: "$locale")
+
   contentHub(query: String, pagination: PaginationInput!): ContentHubResult!
     @contentHub(query: "$query", pagination: "$pagination")
 }