feat: implement data fetching for templates

Author: moonmeister

examples/next/template-hierarchy/example-app/src/lib/queryHandler.js

@@ -0,0 +1,47 @@
+import { client, fetchAllPaginated } from "./client";
+
+export async function fetchQueries({ queries, context, props }) {
+  if (!queries || queries.length === 0) {
+    console.error("No queries provided");
+    return {};
+  }
+
+  let queryPromises = [];
+
+  for (const query of queries) {
+    if (!query.query) {
+      console.error("Query is undefined");
+      continue;
+    }
+
+    const queryName = query.name || query.query.definitions[0].name?.value;
+
+    if (!queryName) {
+      console.error("Query name is undefined, skipping query");
+      continue;
+    }
+
+    const queryVariables = query.variables
+      ? query.variables(context, props)
+      : {};
+
+    const queryResp = client.query(query.query, queryVariables);
+
+    queryPromises.push(
+      queryResp.then((response) => ({
+        name: queryName,
+        response,
+      }))
+    );
+  }
+
+  const allSettledQueries = await Promise.all(queryPromises);
+
+  const allResponses = {};
+
+  for (const { name, response } of allSettledQueries) {
+    allResponses[name] = response;
+  }
+
+  return allResponses;
+}

examples/next/template-hierarchy/example-app/src/pages/[[...uri]].js

@@ -1,6 +1,7 @@
 import { uriToTemplate } from "@/lib/templateHierarchy";
 import { RouteDataProvider } from "@/lib/context";
 import availableTemplates from "@/wp-templates";
+import { fetchQueries } from "@/lib/queryHandler";
 
 export default function Page(props) {
   const { templateData } = props;
@@ -14,7 +15,8 @@ export default function Page(props) {
   );
 }
 
-export async function getServerSideProps({ params }) {
+export async function getServerSideProps(context) {
+  const { params } = context;
   const uri = Array.isArray(params.uri)
     ? "/" + params.uri?.join("/") + "/"
     : "/";
@@ -30,12 +32,25 @@ export async function getServerSideProps({ params }) {
     };
   }
 
+  const PageTemplate = availableTemplates[templateData.template?.id];
+
+  const component = await PageTemplate.render.preload();
+
+  const graphqlData = await fetchQueries({
+    queries: component.default.queries,
+    context,
+    props: {
+      uri,
+      templateData,
+    },
+  });
+
   return {
     props: {
-      params,
       uri,
       // https://github.com/vercel/next.js/discussions/11209#discussioncomment-35915
       templateData: JSON.parse(JSON.stringify(templateData)),
+      graphqlData: JSON.parse(JSON.stringify(graphqlData)),
     },
   };
 }