feat: multiple queries per template

components/FieldTypesList.jsx

@@ -45,7 +45,8 @@ export function FieldTypesList({ data }) {
                     fieldType?.featuredImage?.node.altText ??
                     'screenshot of the field type'
                   }
-                  className="m-auto shrink-0 text-center"
+                  layout="responsive"
+                  className="shrink-0"
                 />
               )}
               <div className="mt-auto">

components/Layout.jsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical } from '@faustwp/core'
+import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
@@ -13,8 +13,8 @@ import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 import { collectHeadings } from '@/lib/utils'
 
-Layout.fragment = gql`
-  fragment LayoutFragment on RootQuery {
+export const LAYOUT_QUERY = gql`
+  query LayoutFragment {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
@@ -75,26 +75,24 @@ function useTableOfContents(tableOfContents) {
   return currentSection
 }
 
-export function Layout({ data, children, toc, title }) {
+export function Layout({ node, children, toc, title }) {
+  const { sitewideNotice, primaryMenuItems, footerMenuItems, docsSidebarMenuItems } = useFaustQuery(LAYOUT_QUERY);
   let tableOfContents = toc && toc.length ? collectHeadings(toc) : []
 
-  const primaryMenuItems = data?.primaryMenuItems ?? []
   const primaryNavigation = primaryMenuItems?.nodes
     ? flatListToHierarchical(primaryMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
-  const footerMenuItems = data?.footerMenuItems ?? []
   const footerNavigation = footerMenuItems?.nodes
     ? flatListToHierarchical(footerMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
-  const docsSidebarMenuItems = data?.docsSidebarMenuItems ?? []
   const docsSidebarNavigation = docsSidebarMenuItems?.nodes
     ? flatListToHierarchical(docsSidebarMenuItems.nodes, {
         idKey: 'id',
@@ -105,13 +103,13 @@ export function Layout({ data, children, toc, title }) {
   let docsSidebarAllLinks =
     docsSidebarNavigation?.flatMap((section) => section.links) ?? []
   let linkIndex = docsSidebarAllLinks.findIndex((link) => {
-    return link.href === data?.node?.uri
+    return link.href === node?.uri
   })
   let previousPage = docsSidebarAllLinks[linkIndex - 1]
 
   let nextPage = docsSidebarAllLinks[linkIndex + 1]
   let section = docsSidebarAllLinks.find((section) =>
-    section.links.find((link) => link.href === data?.node?.uri),
+    section.links.find((link) => link.href === node?.uri),
   )
   let currentSection = useTableOfContents(tableOfContents)
 
@@ -127,8 +125,8 @@ export function Layout({ data, children, toc, title }) {
 
   return (
     <>
-      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
-      <SiteHeader navigation={primaryNavigation} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
+      <SitewideNotice displayNotice={sitewideNotice.sitewideNoticeFields.displayNotice} message={sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} isNoticeVisible={sitewideNotice.sitewideNoticeFields.displayNotice} />
 
       <main className='content'>
         <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
@@ -138,7 +136,9 @@ export function Layout({ data, children, toc, title }) {
             <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
             <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
               <DocsSidebarNavigation
-                data={data}
+                data={{
+                  node
+                }}
                 navigation={docsSidebarNavigation}
               />
             </div>

components/LayoutArchive.jsx

@@ -10,8 +10,8 @@ import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 
-LayoutArchive.fragment = gql`
-  fragment LayoutArchiveFragment on RootQuery {
+export const LAYOUT_ARCHIVE_QUERY = gql`
+  query LayoutArchive {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment

components/LayoutFrontPage.jsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical } from '@faustwp/core'
+import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
 
 import { FooterNavigation } from './FooterNavigation'
 import { SiteFooter } from './SiteFooter'
@@ -9,8 +9,8 @@ import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 
 
-LayoutFrontPage.fragment = gql`
-  fragment LayoutFrontPageFragment on RootQuery {
+export const LAYOUT_FRONT_PAGE_QUERY = gql`
+  query LayoutFrontPageFragment {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...FooterNavigationFragment
@@ -20,16 +20,17 @@ LayoutFrontPage.fragment = gql`
   ${FooterNavigation.fragment}
 `
 
-export function LayoutFrontPage({ data, children }) {
-  const primaryMenuItems = data?.primaryMenuItems ?? []
+export function LayoutFrontPage({ children }) {
+
+  const { sitewideNotice, primaryMenuItems, footerMenuItems } = useFaustQuery(LAYOUT_FRONT_PAGE_QUERY);
+
   const primaryNavigation = primaryMenuItems?.nodes
     ? flatListToHierarchical(primaryMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
-  const footerMenuItems = data?.footerMenuItems ?? []
   const footerNavigation = footerMenuItems?.nodes
     ? flatListToHierarchical(footerMenuItems.nodes, {
         idKey: 'id',
@@ -39,8 +40,8 @@ export function LayoutFrontPage({ data, children }) {
     : []
   return (
     <>
-      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
-      <SiteHeader navigation={primaryNavigation} data={data} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
+      <SitewideNotice displayNotice={sitewideNotice?.sitewideNoticeFields?.displayNotice} message={sitewideNotice?.sitewideNoticeFields?.message} />
+      <SiteHeader navigation={primaryNavigation} isNoticeVisible={sitewideNotice?.sitewideNoticeFields?.displayNotice} />
       <main className='content'>
         {children}
       </main>