Bug fix

app/api/posts/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from 'tinacms/dist/client';
+
+const POSTS_QUERY = `
+  query PostConnection($last: Float) {
+    postConnection(sort: "date", last: $last) {
+      totalCount
+      edges {
+        cursor
+        node {
+          id
+          title
+          excerpt
+          heroImg
+          category
+          date
+          _sys {
+            breadcrumbs
+          }
+        }
+      }
+    }
+  }
+`;
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const numPosts = parseInt(searchParams.get('numPosts') || '9', 10);
+  const branch = searchParams.get('branch') || process.env.NEXT_PUBLIC_TINA_BRANCH || 'main';
+  const clientId = process.env.NEXT_PUBLIC_TINA_CLIENT_ID;
+  const token = process.env.TINA_TOKEN;
+
+  try {
+    // Create a Tina client configured for the correct branch (following Tina custom queries pattern)
+    const client = createClient({
+      url: `https://content.tinajs.io/content/${clientId}/github/${branch}`,
+      token: token || '',
+      queries: () => ({}),
+    });
+
+    // Use client.request for inline queries as per Tina documentation
+    const result = await client.request({
+      query: POSTS_QUERY,
+      variables: { last: numPosts },
+    }, {});
+
+    // console.log('Tina result:', JSON.stringify(result, null, 2));
+
+    // The client.request returns { data: {...} }, so we need to check the structure
+    const data = result?.data || result;
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    return NextResponse.json({ error: 'Failed to fetch posts' }, { status: 500 });
+  }
+}

components/blocks/top-posts.tsx

@@ -30,61 +30,26 @@ interface PostsData {
   };
 }
 
-const POSTS_QUERY = `
-  query PostConnection($last: Float) {
-    postConnection(sort: "date", last: $last) {
-      totalCount
-      edges {
-        cursor
-        node {
-          id
-          title
-          excerpt
-          heroImg
-          category
-          date
-          _sys {
-            breadcrumbs
-          }
-        }
-      }
-    }
-  }
-`;
-
 export default function LatestPosts({ numPosts = 9 }: { numPosts?: number }) {
   const [data, setData] = useState<PostsData | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function fetchPosts() {
       try {
-        console.log("📢 Fetching latest posts via GraphQL...");
+        console.log("📢 Fetching latest posts...");
         const branch = process.env.NEXT_PUBLIC_TINA_BRANCH || 'main';
-        const clientId = process.env.NEXT_PUBLIC_TINA_CLIENT_ID;
 
-        const response = await fetch(
-          `https://content.tinajs.io/content/${clientId}/github/${branch}`,
-          {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              query: POSTS_QUERY,
-              variables: { last: numPosts },
-            }),
-          }
-        );
+        const response = await fetch(`/api/posts?numPosts=${numPosts}&branch=${branch}`);
 
         if (!response.ok) {
           throw new Error('Failed to fetch posts');
         }
 
         const result = await response.json();
 
-        if (result.data) {
-          setData(result.data);
+        if (result && !result.error) {
+          setData(result);
         }
       } catch (error) {
         console.error("❌ Error fetching latest posts:", error);