Implement Faust’s multiple queries

components/FieldTypesList.jsx

@@ -26,10 +26,16 @@ export function FieldTypesList({ data }) {
         {contentNodes.nodes.map((fieldType) => (
           <div
             key={fieldType.uri}
-            className="dark:bg-white/2.5 group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
+            className="dark:bg-white/2.5 group relative flex flex-col rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
           >
+            <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"
+              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 rounded-2xl px-4 pb-4 pt-16">
+            <div className="relative flex flex-col rounded-2xl px-4 pb-4 pt-16 h-full z-10">
               {fieldType?.featuredImage?.node && (
                 <Image
                   src={fieldType?.featuredImage?.node.sourceUrl}
@@ -39,14 +45,15 @@ export function FieldTypesList({ data }) {
                     fieldType?.featuredImage?.node.altText ??
                     'screenshot of the field type'
                   }
+                  layout="responsive"
+                  className="flex-shrink-0"
                 />
               )}
-              <h3 className="mt-6 font-semibold text-gray-900 dark:text-gray-100">
-                <Link href={fieldType.uri}>
-                  <span className="absolute inset-0 rounded-2xl" />
+              <div className="mt-auto">
+                <h3 className="font-semibold text-center text-gray-900 dark:text-gray-100 pt-6 pb-4">
                   {fieldType.title}
-                </Link>
-              </h3>
+                </h3>
+              </div>
             </div>
           </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 GET_LAYOUT_QUERY = gql`
+  query GetLayout {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
@@ -21,7 +21,7 @@ LayoutArchive.fragment = gql`
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
-`
+`;
 
 export function LayoutArchive({ data, children, title }) {
   const primaryMenuItems = data?.primaryMenuItems ?? []

faust.config.js

@@ -11,5 +11,6 @@ export default setConfig({
   templates,
   experimentalPlugins: [],
   usePersistedQueries: true,
+  experimentalToolbar: false,
   possibleTypes,
 })

package.json

@@ -17,8 +17,8 @@
     "@docsearch/css": "^3.5.2",
     "@docsearch/react": "^3.5.2",
     "@faustwp/blocks": "^2.0.0",
-    "@faustwp/cli": "^1.1.4",
-    "@faustwp/core": "^1.1.2",
+    "@faustwp/cli": "^2.0.0",
+    "@faustwp/core": "^2.1.0",
     "@graphiql/react": "^0.20.2",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.13",

wp-templates/archive-field_type.js

@@ -1,39 +1,12 @@
 import { gql } from '@apollo/client'
 import Head from 'next/head'
+import { useFaustQuery } from "@faustwp/core";
 
 import { FieldTypesList } from '@/components/FieldTypesList'
-import { LayoutArchive } from '@/components/LayoutArchive'
+import { LayoutArchive, GET_LAYOUT_QUERY } from '@/components/LayoutArchive'
 
-export const ArchiveFieldType = (props) => {
-  const { data } = props
-
-  const { node } = data
-
-  if (!node) {
-    return null
-  }
-
-  let toc = []
-
-  return (
-    <>
-      <Head>
-        <title>{`${data?.node?.label} - WPGraphQL for ACF`}</title>
-      </Head>
-      <LayoutArchive
-        title={data?.node?.label ? data.node.label : 'WPGraphQL for ACF'}
-        data={data}
-        navigation={data?.navigation?.nodes}
-        toc={toc}
-      >
-        <FieldTypesList data={data} />
-      </LayoutArchive>
-    </>
-  )
-}
-
-ArchiveFieldType.query = gql`
-  query GetArchiveFieldType($uri: String!) {
+export const GET_POST_QUERY = gql`
+  query GetPost($uri: String!) {
     node: nodeByUri(uri: $uri) {
       __typename
       uri
@@ -62,9 +35,51 @@ ArchiveFieldType.query = gql`
         }
       }
     }
-    ...LayoutArchiveFragment
   }
-  ${LayoutArchive.fragment}
-`
+`;
 
-ArchiveFieldType.variables = ({ uri }) => ({ uri })
+export const ArchiveFieldType = (props) => {
+  const { node } = useFaustQuery(GET_POST_QUERY);
+  const {
+    docsSidebarMenuItems,
+    footerMenuItems,
+    primaryMenuItems,
+    sitewideNotice
+  } = useFaustQuery(GET_LAYOUT_QUERY);
+
+  // console.log({ node, docsSidebarMenuItems, footerMenuItems, primaryMenuItems, sitewideNotice });
+
+  if (!node) {
+    return null
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{`${node?.label} - WPGraphQL for ACF`}</title>
+      </Head>
+      <LayoutArchive
+        title={node?.label ? node.label : 'WPGraphQL for ACF'}
+        data={{
+          node,
+          docsSidebarMenuItems,
+          footerMenuItems,
+          primaryMenuItems,
+          sitewideNotice
+        }}
+      >
+        <FieldTypesList data={{ node }} />
+      </LayoutArchive>
+    </>
+  )
+}
+
+ArchiveFieldType.queries = [
+  {
+    query: GET_LAYOUT_QUERY,
+  },
+  {
+    query: GET_POST_QUERY,
+    variables: ({ uri }) => ({ uri }),
+  }
+];

wp-templates/archive.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
 import Head from 'next/head'
 
-import { LayoutArchive } from '@/components/LayoutArchive'
+import { LayoutArchive, GET_LAYOUT_QUERY } from '@/components/LayoutArchive'
 
 export const Archive = (props) => {
   const { data } = props
@@ -22,7 +22,7 @@ export const Archive = (props) => {
   )
 }
 
-Archive.query = gql`
+const GET_ARCHIVE_QUERY = gql`
   query GetArchive($uri: String!) {
     node: nodeByUri(uri: $uri) {
       __typename
@@ -41,9 +41,7 @@ Archive.query = gql`
         }
       }
     }
-    ...LayoutArchiveFragment
   }
-  ${LayoutArchive.fragment}
 `
 
 Archive.variables = (seedNode) => {