diff --git a/apps/decap/src/helpers/frame.tsx b/apps/decap/src/helpers/frame.tsx index 0e4f09d78..bcba58e3e 100644 --- a/apps/decap/src/helpers/frame.tsx +++ b/apps/decap/src/helpers/frame.tsx @@ -1,4 +1,4 @@ -import { Url } from '@custom/schema'; +import { FrameQuery, registerOperator, Url } from '@custom/schema'; import { NavigationItemSource } from '@custom/schema/source'; import { IntlProvider } from '@custom/ui/intl'; import { Frame } from '@custom/ui/routes/Frame'; @@ -16,22 +16,20 @@ const menuItems = (amount: number) => ); export function PreviewFrame({ children }: PropsWithChildren) { + registerOperator( + () => ({ + mainNavigation: { + items: menuItems(4), + }, + footerNavigation: { + items: menuItems(4), + }, + }), + FrameQuery, + ); return ( - - {children} - + {children} ); } diff --git a/apps/website/src/layouts/index.tsx b/apps/website/src/layouts/index.tsx index e3903a014..a664401eb 100644 --- a/apps/website/src/layouts/index.tsx +++ b/apps/website/src/layouts/index.tsx @@ -1,10 +1,5 @@ import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback'; -import { - FooterQuery, - FrameQuery, - HeaderQuery, - registerOperator, -} from '@custom/schema'; +import { FrameQuery, registerOperator } from '@custom/schema'; import { IntlProvider } from '@custom/ui/intl'; import { Frame } from '@custom/ui/routes/Frame'; import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby'; @@ -19,34 +14,15 @@ export default function Layout({ // TODO: Remove duplication of queries here. const data = useStaticQuery(graphql` query Frame { - main_en: mainNavigation(locale: "en") { + mainNavigation { ...Navigation } - main_de: mainNavigation(locale: "de") { - ...Navigation - } - footer_de: footerNavigation(locale: "de") { - ...Navigation - } - footer_en: footerNavigation(locale: "en") { + footerNavigation { ...Navigation } } `); - 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, - ); + registerOperator(() => data, FrameQuery); return ( {children} diff --git a/packages/schema/src/fragments/Navigation.gql b/packages/schema/src/fragments/Navigation.gql index aaafba98b..c9c90fb00 100644 --- a/packages/schema/src/fragments/Navigation.gql +++ b/packages/schema/src/fragments/Navigation.gql @@ -1,4 +1,5 @@ fragment Navigation on Navigation { + locale items { ...NavigationItem } diff --git a/packages/schema/src/operations/Footer.gql b/packages/schema/src/operations/Footer.gql deleted file mode 100644 index 5fe18f95d..000000000 --- a/packages/schema/src/operations/Footer.gql +++ /dev/null @@ -1,5 +0,0 @@ -query Footer($locale: String!) { - footerNavigation(locale: $locale) { - ...Navigation - } -} diff --git a/packages/schema/src/operations/Frame.gql b/packages/schema/src/operations/Frame.gql index 47a72f859..b5d388016 100644 --- a/packages/schema/src/operations/Frame.gql +++ b/packages/schema/src/operations/Frame.gql @@ -1,14 +1,8 @@ query Frame { - main_en: mainNavigation(locale: "en") { + mainNavigation { ...Navigation } - main_de: mainNavigation(locale: "de") { - ...Navigation - } - footer_en: footerNavigation(locale: "en") { - ...Navigation - } - footer_de: footerNavigation(locale: "de") { + footerNavigation { ...Navigation } } diff --git a/packages/schema/src/operations/Header.gql b/packages/schema/src/operations/Header.gql deleted file mode 100644 index 863c92a33..000000000 --- a/packages/schema/src/operations/Header.gql +++ /dev/null @@ -1,5 +0,0 @@ -query Header($locale: String!) { - mainNavigation(locale: $locale) { - ...Navigation - } -} diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 3e1a1e79f..a6a817f2c 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -2,11 +2,6 @@ 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 @@ -48,14 +43,17 @@ type NavigationItem { } interface Navigation { + locale: Locale! items: [NavigationItem]! } type MainNavigation implements Navigation @menu(menu_id: "main") { + locale: Locale! @resolveEntityLanguage items: [NavigationItem]! @lang @resolveMenuItems } type FooterNavigation implements Navigation @menu(menu_id: "footer") { + locale: Locale! @resolveEntityLanguage items: [NavigationItem]! @lang @resolveMenuItems } @@ -132,11 +130,9 @@ input PaginationInput { } type Query { - mainNavigation(locale: String!): MainNavigation - @fetchNavigation(type: "MainNavigation", locale: "$locale") + mainNavigation: [MainNavigation] @gatsbyNodes(type: "MainNavigation") - footerNavigation(locale: String!): FooterNavigation - @fetchNavigation(type: "FooterNavigation", locale: "$locale") + footerNavigation: [FooterNavigation] @gatsbyNodes(type: "FooterNavigation") page(id: ID!, rid: ID, locale: String!): Page @fetchEntity(type: "node", id: "$id", rid: "$rid", language: "$locale") diff --git a/packages/ui/src/components/Organisms/Footer.stories.ts b/packages/ui/src/components/Organisms/Footer.stories.ts index e1e5754df..e7eca4940 100644 --- a/packages/ui/src/components/Organisms/Footer.stories.ts +++ b/packages/ui/src/components/Organisms/Footer.stories.ts @@ -1,4 +1,4 @@ -import { FooterQuery, Locale, Url } from '@custom/schema'; +import { FrameQuery, Locale, Navigation, Url } from '@custom/schema'; import { Meta, StoryObj } from '@storybook/react'; import { buildOperator } from '../../helpers/operators'; @@ -11,24 +11,27 @@ export default { }, } satisfies Meta; +export const FooterNavigationExample: Navigation = { + locale: Locale.En, + items: [ + { title: 'About', target: '/about' as Url }, + { title: 'Blog', target: '/blog' as Url }, + { title: 'Jobs', target: '/jobs' as Url }, + { title: 'Press', target: '/press' as Url }, + { title: 'Accessibility', target: '/accessibility' as Url }, + { title: 'Partners', target: '/partners' as Url }, + ].map((item, index) => ({ + ...item, + id: index.toString(), + locale: 'en' as Locale, + })), +}; + export const Default = { parameters: { operators: [ - buildOperator(FooterQuery, () => ({ - footerNavigation: { - items: [ - { title: 'About', target: '/about' as Url }, - { title: 'Blog', target: '/blog' as Url }, - { title: 'Jobs', target: '/jobs' as Url }, - { title: 'Press', target: '/press' as Url }, - { title: 'Accessibility', target: '/accessibility' as Url }, - { title: 'Partners', target: '/partners' as Url }, - ].map((item, index) => ({ - ...item, - id: index.toString(), - locale: 'en' as Locale, - })), - }, + buildOperator(FrameQuery, () => ({ + footerNavigation: [FooterNavigationExample], })), ], }, diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx index ca0feedb7..5526a4812 100644 --- a/packages/ui/src/components/Organisms/Footer.tsx +++ b/packages/ui/src/components/Organisms/Footer.tsx @@ -1,4 +1,4 @@ -import { FooterQuery, Link } from '@custom/schema'; +import { FrameQuery, Link } from '@custom/schema'; import React from 'react'; import { useIntl } from '../../utils/intl'; @@ -6,12 +6,18 @@ import { isTruthy } from '../../utils/isTruthy'; import { buildNavigationTree } from '../../utils/navigation'; import { useOperation } from '../../utils/operation'; +function useFooterNavigation(lang: string = 'en') { + return ( + useOperation(FrameQuery) + .data?.mainNavigation?.filter((nav) => nav?.locale === lang) + .pop() + ?.items.filter(isTruthy) || [] + ); +} + export function Footer() { - const { data } = useOperation(FooterQuery); const intl = useIntl(); - const items = buildNavigationTree( - data?.footerNavigation.items.filter(isTruthy) || [], - ); + const items = buildNavigationTree(useFooterNavigation(intl.locale)); return (