Merge pull request #55 from wp-graphql/feat/template-multiple-queries

feat: use multiple queries for Faust templates
wp-graphql · Jan 12, 2024 · 0f718b6 · 0f718b6 · headless-platform-by-wp-engine · Jan 12, 2024
2 parents 3a38984 + b4a9a76
commit 0f718b6
Show file tree

Hide file tree

Showing 12 changed files with 263 additions and 241 deletions.
diff --git a/components/FieldTypesList.jsx b/components/FieldTypesList.jsx
@@ -31,11 +31,11 @@ export function FieldTypesList({ data }) {
             <Link
               href={fieldType.uri}
               tabIndex={0}
-              className="z-20 absolute inset-0 rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-900/75"
+              className="absolute inset-0 z-20 rounded-2xl focus:outline-none focus:ring-2 focus:ring-zinc-900/75 focus:ring-offset-2"
               aria-label={`${fieldType.title} field type`}
             />
             <div className="ring-zinc-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
-            <div className="relative flex flex-col rounded-2xl px-4 pb-4 pt-16 h-full z-10">
+            <div className="relative z-10 flex h-full flex-col rounded-2xl px-4 pb-4 pt-16">
               {fieldType?.featuredImage?.node && (
                 <Image
                   src={fieldType?.featuredImage?.node.sourceUrl}
@@ -46,11 +46,11 @@ export function FieldTypesList({ data }) {
                     'screenshot of the field type'
                   }
                   layout="responsive"
-                  className="flex-shrink-0"
+                  className="shrink-0"
                 />
               )}
               <div className="mt-auto">
-                <h3 className="font-semibold text-center text-gray-900 dark:text-gray-100 pt-6 pb-4">
+                <h3 className="pb-4 pt-6 text-center font-semibold text-gray-900 dark:text-gray-100">
                   {fieldType.title}
                 </h3>
               </div>

diff --git a/components/Layout.jsx b/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>

diff --git a/components/LayoutFrontPage.jsx b/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>

diff --git a/next.config.mjs b/next.config.mjs
@@ -2,35 +2,16 @@ import { withFaust, getWpHostname } from '@faustwp/core';
 import withMarkdoc from '@markdoc/next.js'
 import withSearch from './markdoc/search.mjs'
 
-function experimentalConfig() {
-
-    const experimental = {
-        scrollRestoration: true,
-    }
-
-    if (process.env.ATLAS_CACHE_HANDLER_ENABLED === undefined) {
-        const atlasExperimentalOptions = { ...experimental, ...{
-            incrementalCacheHandlerPath: require.resolve('./.atlas/atlas-cache-handler.js'),
-            isrMemoryCacheSize: 0
-        }}
-       console.log( { atlasExperimentalOptions })
-       return atlasExperimentalOptions
-    }
-
-    return experimental
-}
-
 const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
-    experimental: experimentalConfig(),
+    experimental: {
+        scrollRestoration: true,
+    },
     trailingSlash: true,
     images: {
         domains: [getWpHostname()],
     },
 };
 
-
-
-
-export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
+export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
diff --git a/wp-blocks/AcfFieldTypeConfigurationBlock.js b/wp-blocks/AcfFieldTypeConfigurationBlock.js
@@ -61,6 +61,11 @@ function TabContent({ fieldTypeConfigurationBlockFields, uniqueId, format }) {
 
 export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFields }) {
   const { acfFieldType } = fieldTypeConfigurationBlockFields;
+  const [uniqueId, setUniqueId] = useState('');
+  useEffect(() => {
+    setUniqueId(stringToHash(acfFieldType));
+  }, [acfFieldType]);
+
   if ( ! acfFieldType ) {
     return (
       <Card>
@@ -70,11 +75,6 @@ export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFiel
       </Card>
     );
   };
-  const [uniqueId, setUniqueId] = useState('');
-
-  useEffect(() => {
-    setUniqueId(stringToHash(acfFieldType));
-  }, [acfFieldType]);
 
   const tabData = [
     { key: 'php', name: 'PHP' },

diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -48,7 +48,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   };
 
 
-  if ( ! fieldTypeSettings?.nodes?.length ) {
+  if ( fieldTypeSettings?.nodes?.length === 0 ) {
     return (
       <Card>
         <CardHeader className="grid grid-cols-[1fr_110px] items-start space-y-2">
@@ -59,7 +59,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   }
 
   // copy the nodes so we can sort them before returning
-  const settings = [...fieldTypeSettings?.nodes];
+  const settings = [...fieldTypeSettings.nodes];
 
   // sort by name
   settings.sort((a, b) => {

diff --git a/wp-blocks/index.js b/wp-blocks/index.js
@@ -1,5 +1,4 @@
 import { CoreBlocks } from '@faustwp/blocks'
-
 import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock'
 import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from './AcfGraphqlQuery'

diff --git a/wp-templates/IndexTemplate.js b/wp-templates/IndexTemplate.js
@@ -1,13 +1,62 @@
 import { gql } from '@apollo/client'
 import { WordPressBlocksViewer } from '@faustwp/blocks'
-import { flatListToHierarchical } from '@faustwp/core'
+import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
 import Head from 'next/head'
 
-import { Layout } from '@/components/Layout'
+import { LAYOUT_QUERY, Layout } from '@/components/Layout'
 import blocks from '@/wp-blocks'
 
-export const IndexTemplate = ({ data }) => {
-  const { node } = data
+const INDEX_TEMPLATE_QUERY = gql`
+query IndexTemplate($uri: String!) {
+    node: nodeByUri(uri: $uri) {
+        __typename
+        uri
+        ...on NodeWithTitle {
+            title
+        }
+        ...on NodeWithEditorBlocks {
+            editorBlocks {
+                __typename
+                name
+                renderedHtml
+                id: clientId
+                parentId: parentClientId
+                ...${blocks.CoreParagraph.fragments.key}
+                ...${blocks.CoreColumns.fragments.key}
+                ...${blocks.CoreColumn.fragments.key}
+                ...${blocks.CoreCode.fragments.key}
+                ...${blocks.CoreButtons.fragments.key}
+                ...${blocks.CoreButton.fragments.key}
+                ...${blocks.CoreQuote.fragments.key}
+                ...${blocks.CoreImage.fragments.key}
+                ...${blocks.CoreSeparator.fragments.key}
+                ...${blocks.CoreList.fragments.key}
+                ...${blocks.CoreHeading.fragments.key}
+            }
+        }
+        ...on ContentNode {
+            modified
+            ...on NodeWithContentEditor {
+                content
+            }
+        }
+    }
+}
+${blocks.CoreParagraph.fragments.entry}
+${blocks.CoreColumns.fragments.entry}
+${blocks.CoreColumn.fragments.entry}
+${blocks.CoreCode.fragments.entry}
+${blocks.CoreButtons.fragments.entry}
+${blocks.CoreButton.fragments.entry}
+${blocks.CoreQuote.fragments.entry}
+${blocks.CoreImage.fragments.entry}
+${blocks.CoreSeparator.fragments.entry}
+${blocks.CoreList.fragments.entry}
+${blocks.CoreHeading.fragments.entry}
+`
+
+export const IndexTemplate = () => {
+  const { node } = useFaustQuery(INDEX_TEMPLATE_QUERY)
 
   if (!node) {
     return null
@@ -54,9 +103,8 @@ export const IndexTemplate = ({ data }) => {
       </Head>
       <Layout
         title={node?.title ? node.title : 'WPGraphQL for ACF'}
-        data={data}
-        navigation={data?.navigation?.nodes}
         toc={toc}
+        node={node}
       >
         {node?.modified && (
           <div id="last-updated" className="text-sm text-gray-500">
@@ -83,55 +131,12 @@ export const IndexTemplate = ({ data }) => {
   )
 }
 
-IndexTemplate.query = gql`
-query IndexTemplate($uri: String!) {
-    node: nodeByUri(uri: $uri) {
-        __typename
-        uri
-        ...on NodeWithTitle {
-            title
-        }
-        ...on NodeWithEditorBlocks {
-            editorBlocks {
-                __typename
-                name
-                renderedHtml
-                id: clientId
-                parentId: parentClientId
-                ...${blocks.CoreParagraph.fragments.key}
-                ...${blocks.CoreColumns.fragments.key}
-                ...${blocks.CoreColumn.fragments.key}
-                ...${blocks.CoreCode.fragments.key}
-                ...${blocks.CoreButtons.fragments.key}
-                ...${blocks.CoreButton.fragments.key}
-                ...${blocks.CoreQuote.fragments.key}
-                ...${blocks.CoreImage.fragments.key}
-                ...${blocks.CoreSeparator.fragments.key}
-                ...${blocks.CoreList.fragments.key}
-                ...${blocks.CoreHeading.fragments.key}
-            }
-        }
-        ...on ContentNode {
-            modified
-            ...on NodeWithContentEditor {
-                content
-            }
-        }
-    }
-    ...LayoutFragment
-}
-${blocks.CoreParagraph.fragments.entry}
-${blocks.CoreColumns.fragments.entry}
-${blocks.CoreColumn.fragments.entry}
-${blocks.CoreCode.fragments.entry}
-${blocks.CoreButtons.fragments.entry}
-${blocks.CoreButton.fragments.entry}
-${blocks.CoreQuote.fragments.entry}
-${blocks.CoreImage.fragments.entry}
-${blocks.CoreSeparator.fragments.entry}
-${blocks.CoreList.fragments.entry}
-${blocks.CoreHeading.fragments.entry}
-${Layout.fragment}
-`
-
-IndexTemplate.variables = ({ uri }) => ({ uri })
+IndexTemplate.queries = [
+  {
+    query: LAYOUT_QUERY,
+  },
+  {
+    query: INDEX_TEMPLATE_QUERY,
+    variables: ({ uri }) => ({ uri }),
+  }
+];