Refactor to use dropin replacement of useFaustQuery

components/EditPost.jsx

@@ -9,7 +9,6 @@ import {
   } from "@/components/ui/context-menu"
 
 const EditPost = ({ post, children }) => {
-    console.log({post})
     return(
         <ContextMenu>
         <ContextMenuTrigger>{children}</ContextMenuTrigger>

components/Layout.jsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
+import { flatListToHierarchical } from '@faustwp/core'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
@@ -13,6 +13,7 @@ import { Prose } from '@/components/Prose'
 import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse'
 import { collectHeadings } from '@/lib/utils'
 
 export const LAYOUT_QUERY = gql`
@@ -77,8 +78,13 @@ function useTableOfContents(tableOfContents) {
   return currentSection
 }
 
-export function Layout({ node, children, toc, title }) {
-  const { sitewideNotice, primaryMenuItems, footerMenuItems, docsSidebarMenuItems } = useFaustQuery(LAYOUT_QUERY);
+export function Layout(props) {
+  const { node, children, toc, title } = props;
+
+  const response = useFaustQuery(LAYOUT_QUERY, props);
+
+  const { sitewideNotice, primaryMenuItems, footerMenuItems, docsSidebarMenuItems } = response;
+
   let tableOfContents = toc && toc.length ? collectHeadings(toc) : []
 
   const primaryNavigation = primaryMenuItems?.nodes

components/LayoutFrontPage.jsx

@@ -1,12 +1,14 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
+import { flatListToHierarchical } from '@faustwp/core'
+
 
 import { FooterNavigation } from './FooterNavigation'
 import { SiteFooter } from './SiteFooter'
 
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse'
 
 
 export const LAYOUT_FRONT_PAGE_QUERY = gql`
@@ -20,9 +22,10 @@ export const LAYOUT_FRONT_PAGE_QUERY = gql`
   ${FooterNavigation.fragment}
 `
 
-export function LayoutFrontPage({ children }) {
+export function LayoutFrontPage(props) {
+  const { children } = props;
 
-  const { sitewideNotice, primaryMenuItems, footerMenuItems } = useFaustQuery(LAYOUT_FRONT_PAGE_QUERY);
+  const { sitewideNotice, primaryMenuItems, footerMenuItems } = useFaustQuery(LAYOUT_FRONT_PAGE_QUERY, props);
 
   const primaryNavigation = primaryMenuItems?.nodes
     ? flatListToHierarchical(primaryMenuItems.nodes, {

lib/getFaustQueryResponse.js

@@ -0,0 +1,8 @@
+import { print } from '@apollo/client/utilities';
+import { sha256 } from 'js-sha256';
+
+export function useFaustQuery(query, props = null) {
+  const sha = sha256(print(query));
+
+  return props?.__FAUST_QUERIES__?.[sha];
+}

pages/wordpress-sitemap.xml.js

@@ -37,7 +37,6 @@ async function getAllWPContent(after = null, acc = []) {
         },
     })
 
-    console.log(data.contentNodes.nodes)
     acc = [...acc, ...data.contentNodes.nodes]
 
     if (data.contentNodes.pageInfo.hasNextPage) {

tailwind.config.js

@@ -1,6 +1,7 @@
 import aspectRatio from '@tailwindcss/aspect-ratio';
 import typography from '@tailwindcss/typography';
 import defaultTheme from 'tailwindcss/defaultTheme';
+
 import customTypography from './typography.js';
 
 const tailwindConfig = {

wp-blocks/CoreCode.js

@@ -12,7 +12,6 @@ export function CoreCode(props) {
       ? slugify(attributes.content)
       : attributes.anchor,
   }
-  console.log({attributes, customAttributes});
 
   return (
     <>

wp-templates/IndexTemplate.js

@@ -1,9 +1,10 @@
 import { gql } from '@apollo/client'
 import { WordPressBlocksViewer } from '@faustwp/blocks'
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
+import { flatListToHierarchical } from '@faustwp/core'
 import Head from 'next/head'
 
 import { LAYOUT_QUERY, Layout } from '@/components/Layout'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse'
 import blocks from '@/wp-blocks'
 
 const INDEX_TEMPLATE_QUERY = gql`
@@ -58,8 +59,9 @@ ${blocks.CoreList.fragments.entry}
 ${blocks.CoreHeading.fragments.entry}
 `
 
-export const IndexTemplate = () => {
-  const { node } = useFaustQuery(INDEX_TEMPLATE_QUERY)
+export const IndexTemplate = (props) => {
+  console.log('IndexTemplate', {props});
+  const { node } = useFaustQuery(INDEX_TEMPLATE_QUERY, props)
 
   if (!node) {
     return null
@@ -94,10 +96,10 @@ export const IndexTemplate = () => {
   })
 
   // eslint-disable-next-line no-console
-  console.log({
-    editorBlocks,
-    blockList,
-  })
+  // console.log({
+  //   editorBlocks,
+  //   blockList,
+  // })
 
   return (
     <>
@@ -108,6 +110,7 @@ export const IndexTemplate = () => {
         title={node?.title ? node.title : 'WPGraphQL for ACF'}
         toc={toc}
         node={node}
+        __FAUST_QUERIES__={props.__FAUST_QUERIES__}
       >
         {node?.modified && (
           <div id="last-updated" className="text-sm text-gray-500">

wp-templates/archive-field_type.js

@@ -1,9 +1,9 @@
 import { gql } from '@apollo/client'
-import { useFaustQuery } from "@faustwp/core";
 import Head from 'next/head'
 
 import { FieldTypesList } from '@/components/FieldTypesList'
 import { LayoutArchive, LAYOUT_ARCHIVE_QUERY } from '@/components/LayoutArchive'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse';
 
 export const GET_POST_QUERY = gql`
   query GetPost($uri: String!) {
@@ -38,14 +38,16 @@ export const GET_POST_QUERY = gql`
   }
 `;
 
-export const ArchiveFieldType = () => {
-  const { node } = useFaustQuery(GET_POST_QUERY);
+export const ArchiveFieldType = (props) => {
+  const response = useFaustQuery(GET_POST_QUERY, props);
+  const node = response?.node;
+
   const {
     docsSidebarMenuItems,
     footerMenuItems,
     primaryMenuItems,
     sitewideNotice
-  } = useFaustQuery(LAYOUT_ARCHIVE_QUERY);
+  } = useFaustQuery(LAYOUT_ARCHIVE_QUERY, props);
 
   if (!node) {
     return null
@@ -65,6 +67,7 @@ export const ArchiveFieldType = () => {
           primaryMenuItems,
           sitewideNotice
         }}
+        __FAUST_QUERIES__={props.__FAUST_QUERIES__}
       >
         <FieldTypesList data={{ node }} />
       </LayoutArchive>

wp-templates/archive.js

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client'
-import { useFaustQuery } from "@faustwp/core";
 import Head from 'next/head'
 
 import { LayoutArchive, LAYOUT_ARCHIVE_QUERY } from '@/components/LayoutArchive'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse';
 
 const ARCHIVE_QUERY = gql`
   query Archive($uri: String!) {
@@ -26,14 +26,14 @@ const ARCHIVE_QUERY = gql`
   }
 `
 
-export const Archive = () => {
-  const { node } = useFaustQuery(ARCHIVE_QUERY);
+export const Archive = (props) => {
+  const { node } = useFaustQuery(ARCHIVE_QUERY, props);
   const {
     docsSidebarMenuItems,
     footerMenuItems,
     primaryMenuItems,
     sitewideNotice
-  } = useFaustQuery(LAYOUT_ARCHIVE_QUERY);
+  } = useFaustQuery(LAYOUT_ARCHIVE_QUERY, props);
 
   return (
     <>
@@ -49,6 +49,7 @@ export const Archive = () => {
           primaryMenuItems,
           sitewideNotice
         }}
+        __FAUST_QUERIES__={props.__FAUST_QUERIES__}
       >
         {/* <pre>{JSON.stringify(props, null, 2)}</pre> */}
       </LayoutArchive>

wp-templates/front-page.js

@@ -1,11 +1,11 @@
 import { gql } from '@apollo/client'
-import { useFaustQuery } from '@faustwp/core'
 
 import HomepageLayoutsLayoutsFaqsLayout from '@/components/HomepageLayoutsLayoutsFaqsLayout'
 import HomepageLayoutsLayoutsFeaturesLayout from '@/components/HomepageLayoutsLayoutsFeaturesLayout'
 import HomepageLayoutsLayoutsHeroLayout from '@/components/HomepageLayoutsLayoutsHeroLayout'
 import HomepageLayoutsLayoutsSupportedFieldTypesLayout from '@/components/HomepageLayoutsLayoutsSupportedFieldTypesLayout'
 import { LayoutFrontPage, LAYOUT_FRONT_PAGE_QUERY } from '@/components/LayoutFrontPage'
+import { useFaustQuery } from '@/lib/getFaustQueryResponse'
 
 const FRONT_PAGE_QUERY = gql`
   query GetFrontPage($uri: String!) {
@@ -38,12 +38,11 @@ const FRONT_PAGE_QUERY = gql`
   ${HomepageLayoutsLayoutsFaqsLayout.fragment}
 `;
 
-export const FrontPage = () => {
-
-  const { frontPage } = useFaustQuery(FRONT_PAGE_QUERY);
+export const FrontPage = (props) => {
+  const { frontPage } = useFaustQuery(FRONT_PAGE_QUERY, props);
 
   return (
-    <LayoutFrontPage>
+    <LayoutFrontPage __FAUST_QUERIES__={props.__FAUST_QUERIES__}>
       {frontPage?.homepageLayouts?.layouts?.map((layout, i) => {
         switch (layout.__typename) {
           case 'HomepageLayoutsLayoutsHeroLayout':

wp-templates/single-field_type.js

@@ -1,12 +1,13 @@
 import { gql } from '@apollo/client';
 import { WordPressBlocksViewer } from '@faustwp/blocks';
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core';
+import { flatListToHierarchical } from '@faustwp/core';
 import { Separator } from '@radix-ui/react-separator';
 
 import EditPost from '@/components/EditPost';
 import { Layout, LAYOUT_QUERY } from '@/components/Layout';
 import OpenGraph from '@/components/OpenGraph';
 import { Badge } from '@/components/ui/badge';
+import { useFaustQuery } from '@/lib/getFaustQueryResponse';
 import blocks from '@/wp-blocks';
 import { AcfFieldTypeConfigurationBlock } from '@/wp-blocks/AcfFieldTypeConfigurationBlock';
 import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock';
@@ -77,8 +78,9 @@ const SINGLE_ACF_FIELD_TYPE_QUERY = gql`
   ${OpenGraph.fragments.contentNode}
 `;
 
-export const SingleFieldType = () => {
-  const { node } = useFaustQuery(SINGLE_ACF_FIELD_TYPE_QUERY);
+export const SingleFieldType = (props) => {
+  const response = useFaustQuery(SINGLE_ACF_FIELD_TYPE_QUERY, props);
+  const node = response?.node;
 
   if (!node) return null;