feat: add data fetching to

Author: moonmeister

examples/next/template-hierarchy/example-app/src/components/RecentPosts.js

@@ -0,0 +1,40 @@
+import { gql } from "urql";
+import { useRouteData } from "@/lib/context";
+
+export default function RecentPosts() {
+  const { graphqlData } = useRouteData();
+
+  const posts = graphqlData?.RecentPosts?.data?.posts?.nodes || [];
+
+  if (graphqlData?.RecentPosts?.error) {
+    console.error("Error fetching RecentPosts:", graphqlData.RecentPosts.error);
+    return <div>Error loading recent posts.</div>;
+  }
+
+  return (
+    <div className="recent-posts">
+      <h2>Recent Posts</h2>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>
+            <a href={post.uri}>{post.title}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+RecentPosts.query = {
+  query: gql`
+    query RecentPosts {
+      posts(first: 5) {
+        nodes {
+          id
+          title
+          uri
+        }
+      }
+    }
+  `,
+};

examples/next/template-hierarchy/example-app/src/wp-templates/home.js

@@ -1,10 +1,16 @@
 import Layout from "@/components/Layout";
+import RecentPosts from "@/components/RecentPosts";
 
 export default function Home() {
   return (
     <Layout>
       <h2>Home Template</h2>
       <p>This is the home page of the template hierarchy example app.</p>
+      <RecentPosts />
     </Layout>
   );
 }
+
+Home.queries = [
+  RecentPosts.query, // Ensure RecentPosts query is included
+];

examples/next/template-hierarchy/example-app/src/wp-templates/single.js

@@ -1,10 +1,36 @@
 import Layout from "@/components/Layout";
 
-export default function SingleTemplate() {
+export default function SingleTemplate({ graphqlData }) {
+  const { SinglePostQuery } = graphqlData;
   return (
     <Layout>
-      <h2>Single Template</h2>
-      <p>This is the single template for the template hierarchy example app.</p>
+      <h2>{SinglePostQuery.response.data.post.title}</h2>
+      <div
+        dangerouslySetInnerHTML={{
+          __html: SinglePostQuery.response.data.post.content,
+        }}
+      />
     </Layout>
   );
 }
+
+export const queries = "test";
+
+SingleTemplate.queries = [
+  {
+    name: "SinglePostQuery",
+    query: /* GraphQL */ `
+      query SinglePostQuery($id: ID!) {
+        post(id: $id, idType: URI) {
+          id
+          title
+          content
+          date
+        }
+      }
+    `,
+    variables: (event, { uri }) => ({
+      id: uri,
+    }),
+  },
+];