Support for multiple queries in a Faust template

examples/next/faustwp-getting-started/wp-templates/single.js

@@ -12,18 +12,76 @@ import {
   FeaturedImage,
   SEO,
 } from '../components';
+import { useContext } from 'react';
+import { useFaustQuery, FaustContext } from '@faustwp/core';
+
+const GET_LAYOUT_QUERY = gql`
+  ${BlogInfoFragment}
+  ${NavigationMenu.fragments.entry}
+  query GetLayout(
+    $headerLocation: MenuLocationEnum
+    $footerLocation: MenuLocationEnum
+  ) {
+    generalSettings {
+      ...BlogInfoFragment
+    }
+    headerMenuItems: menuItems(where: { location: $headerLocation }) {
+      nodes {
+        ...NavigationMenuItemFragment
+      }
+    }
+    footerMenuItems: menuItems(where: { location: $footerLocation }) {
+      nodes {
+        ...NavigationMenuItemFragment
+      }
+    }
+  }
+`;
+
+const GET_POST_QUERY = gql`
+  ${FeaturedImage.fragments.entry}
+  query GetPost($databaseId: ID!, $asPreview: Boolean = false) {
+    post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
+      title
+      content
+      date
+      author {
+        node {
+          name
+        }
+      }
+      ...FeaturedImageFragment
+    }
+  }
+`;
 
 export default function Component(props) {
+  const context = useContext(FaustContext);
+
+  /**
+   * @TODO I'm not sure why context is shortly undefined before we
+   * get to our Faust component. The default value is set as undefined
+   * but the value is updated in the FaustProvider way before this component
+   * is reached. Will need to do some more digging. Otherwise, context is not
+   * found in `useFaustQuery` and the hook fails.
+   */
+  if (!context) {
+    return null;
+  }
+
+  const { post } = useFaustQuery(GET_POST_QUERY);
+  const { generalSettings, headerMenuItems, footerMenuItems } =
+    useFaustQuery(GET_LAYOUT_QUERY);
+
   // Loading state for previews
   if (props.loading) {
     return <>Loading...</>;
   }
 
-  const { title: siteTitle, description: siteDescription } =
-    props?.data?.generalSettings;
-  const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
-  const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
-  const { title, content, featuredImage, date, author } = props.data.post;
+  const { title: siteTitle, description: siteDescription } = generalSettings;
+  const primaryMenu = headerMenuItems?.nodes ?? [];
+  const footerMenu = footerMenuItems?.nodes ?? [];
+  const { title, content, featuredImage, date, author } = post ?? {};
 
   return (
     <>
@@ -55,42 +113,7 @@ export default function Component(props) {
   );
 }
 
-Component.query = gql`
-  ${BlogInfoFragment}
-  ${NavigationMenu.fragments.entry}
-  ${FeaturedImage.fragments.entry}
-  query GetPost(
-    $databaseId: ID!
-    $headerLocation: MenuLocationEnum
-    $footerLocation: MenuLocationEnum
-    $asPreview: Boolean = false
-  ) {
-    post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
-      title
-      content
-      date
-      author {
-        node {
-          name
-        }
-      }
-      ...FeaturedImageFragment
-    }
-    generalSettings {
-      ...BlogInfoFragment
-    }
-    headerMenuItems: menuItems(where: { location: $headerLocation }) {
-      nodes {
-        ...NavigationMenuItemFragment
-      }
-    }
-    footerMenuItems: menuItems(where: { location: $footerLocation }) {
-      nodes {
-        ...NavigationMenuItemFragment
-      }
-    }
-  }
-`;
+Component.queries = [GET_LAYOUT_QUERY, GET_POST_QUERY];
 
 Component.variables = ({ databaseId }, ctx) => {
   return {

packages/faustwp-core/src/components/FaustProvider.tsx

@@ -1,5 +1,5 @@
 import { ApolloProvider } from '@apollo/client';
-import React from 'react';
+import React, { createContext } from 'react';
 // eslint-disable-next-line import/extensions
 import { useRouter } from 'next/router';
 // eslint-disable-next-line import/extensions
@@ -8,6 +8,7 @@
 import { Toolbar } from './Toolbar/index.js';
 import { SeedNode } from '../queries/seedQuery.js';
 import { getConfig } from '../config/index.js';
+import { FaustContext } from '../store/FaustContext.js';
 
 export type FaustPageProps = AppProps['pageProps'] & {
   __SEED_NODE__?: SeedNode;
@@ -23,15 +24,17 @@
   const apolloClient = useApollo(pageProps);
 
   return (
-    <ApolloProvider client={apolloClient}>
-      {experimentalToolbar && (
-        <Toolbar
-          key={`faust-toolbar-${router.asPath}`} // Required in order to load each route's own seed node.
-          // eslint-disable-next-line no-underscore-dangle
-          seedNode={pageProps.__SEED_NODE__}
-        />
-      )}
-      {children}
-    </ApolloProvider>
+    <FaustContext.Provider value={pageProps}>
+      <ApolloProvider client={apolloClient}>
+        {experimentalToolbar && (
+          <Toolbar
+            key={`faust-toolbar-${router.asPath}`} // Required in order to load each route's own seed node.
+            // eslint-disable-next-line no-underscore-dangle
+            seedNode={pageProps.__SEED_NODE__}
+          />
+        )}
+        {children}
+      </ApolloProvider>
+    </FaustContext.Provider>
   );
 }