Add a GraphQL API using Fuse

.eslintrc.json

@@ -4,7 +4,7 @@
     "import/no-relative-parent-imports": [
       "error",
       {
-        "ignore": ["@/app", "@/components", "@/lib"]
+        "ignore": ["@/app", "@/components", "@/lib", "@/fuse", "@/types"]
       }
     ]
   }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

app/(stories)/item/[id]/page.tsx

@@ -8,6 +8,8 @@ import { Suspense } from "react";
 import { Comments } from "@/components/comments";
 import { ReplyForm } from "./reply-form";
 import Link from "next/link";
+import { graphql } from "@/fuse";
+import { execute } from "@/fuse/server";
 
 export const metadata = {
   openGraph: {
@@ -23,30 +25,22 @@ export const metadata = {
   },
 };
 
-const getStory = async function getStory(idParam: string) {
-  const id = `story_${idParam}`;
-  return (
-    await db
-      .select({
-        id: storiesTable.id,
-        title: storiesTable.title,
-        domain: storiesTable.domain,
-        url: storiesTable.url,
-        username: storiesTable.username,
-        points: storiesTable.points,
-        submitted_by: usersTable.username,
-        comments_count: storiesTable.comments_count,
-        created_at: storiesTable.created_at,
-      })
-      .from(storiesTable)
-      .where(sql`${storiesTable.id} = ${id}`)
-      .limit(1)
-      .leftJoin(
-        usersTable,
-        sql`${usersTable.id} = ${storiesTable.submitted_by}`
-      )
-  )[0];
-};
+const GET_STORY_QUERY = graphql(`
+  query getStory($id: ID!) {
+    story(id: $id) {
+      id
+      title
+      url
+      domain
+      points
+      comments_count
+      created_at
+      submitter {
+        username
+      }
+    }
+  }
+`)
 
 /**
  * This code was generated by v0 by Vercel.
@@ -61,13 +55,17 @@ export default async function ItemPage({
   const rid = headers().get("x-vercel-id") ?? nanoid();
 
   console.time(`fetch story ${idParam} (req: ${rid})`);
-  const story = await getStory(idParam);
+
+  const { data, errors } = await execute({ query: GET_STORY_QUERY, variables: { id: idParam } })
+
   console.timeEnd(`fetch story ${idParam} (req: ${rid})`);
 
-  if (!story) {
+  if (!data?.story) {
     notFound();
   }
 
+  const { story } = data;
+
   const now = Date.now();
   return (
     <div className="px-3">
@@ -95,7 +93,7 @@ export default async function ItemPage({
           ) : (
             <Link
               prefetch={true}
-              href={`/item/${story.id.replace(/^story_/, "")}`}
+              href={`/item/${story.id}`}
               className="text-[#000000] hover:underline"
             >
               {story.title}
@@ -110,8 +108,8 @@ export default async function ItemPage({
 
           <p className="text-xs text-[#666] md:text-[#828282]">
             {story.points} point{story.points > 1 ? "s" : ""} by{" "}
-            {story.submitted_by ?? story.username}{" "}
-            <TimeAgo now={now} date={story.created_at} />{" "}
+            {story.submitter.username}{" "}
+            <TimeAgo now={now} date={new Date(story.created_at)} />{" "}
             <span aria-hidden={true}>| </span>
             <span className="cursor-default" title="Not implemented">
               flag
@@ -124,7 +122,7 @@ export default async function ItemPage({
             <Link
               prefetch={true}
               className="hover:underline"
-              href={`/item/${story.id.replace(/^story_/, "")}`}
+              href={`/item/${story.id}`}
             >
               {story.comments_count} comments
             </Link>

app/(stories)/opengraph-image.tsx

@@ -2,13 +2,34 @@ export const runtime = "edge";
 export const revalidate = 60;
 
 import { ImageResponse } from "next/og";
-import { getStories, getStoriesCount } from "@/components/stories";
 import JSTimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
+import { graphql } from "@/fuse";
+import { execute } from "@/fuse/server";
 
 let timeAgo: JSTimeAgo | null = null;
 const numberFormatter = new Intl.NumberFormat("en-US");
 
+const OPENGRAPH_STORIES_QUERY = graphql(`
+  query getHomepageStories($page: Int, $isNewest: Boolean!, $type: String, $q: String, $limit: Int) {
+    stories(page: $page, isNewest: $isNewest, type: $type, q: $q, limit: $limit) {
+      totalCount
+      edges {
+        node {
+          id
+          title
+          points
+          comments_count
+          created_at
+          submitter {
+            username
+          }
+        }
+      }
+    }
+  }
+`);
+
 /**
  * v0 by Vercel.
  * @see https://v0.dev/r/siAyEHjJLnB
@@ -20,15 +41,14 @@ export default async function MainOG() {
     timeAgo = new JSTimeAgo("en-US");
   }
 
-  const stories = await getStories({
+  const { data, errors } = await execute({ query: OPENGRAPH_STORIES_QUERY, variables: {
     isNewest: false,
     page: 1,
     type: "story",
     q: null,
     limit: 3,
-  });
+  } })
 
-  const count = await getStoriesCount();
 
   // fonts
   const inter300 = fetch(
@@ -69,7 +89,7 @@ export default async function MainOG() {
           </div>
           <div tw="p-4 px-8 flex flex-col justify-center flex-1">
             <ul tw="flex flex-col">
-              {stories.map((story, n) => (
+              {data?.stories.edges.map(({ node: story }, n) => (
                 <li key={story.id} tw="text-3xl flex items-start mb-5">
                   <div
                     tw="flex w-18 pr-4 text-right justify-end text-[#FF9966] flex-shrink-0"
@@ -86,7 +106,7 @@ export default async function MainOG() {
                     </span>
                     <div tw="flex text-gray-600">
                       {story.points} points by{" "}
-                      {story.submitted_by ?? story.username}{" "}
+                      {story.submitter.username}{" "}
                       {timeAgo!.format(story.created_at)} | flag | hide |{" "}
                       {story.comments_count} comments
                     </div>
@@ -97,7 +117,7 @@ export default async function MainOG() {
               <li tw="text-3xl flex items-start mb-5">
                 <div tw="flex w-18 pr-4 text-right justify-end text-[#FF9966] flex-shrink-0"></div>
                 <div tw="flex flex-col text-gray-600">
-                  {numberFormatter.format(count)} more
+                  {data?.stories.totalCount && numberFormatter.format(data.stories.totalCount)} more
                 </div>
               </li>
             </ul>

app/api/fuse/route.ts

@@ -0,0 +1,6 @@
+import { createAPIRouteHandler } from 'fuse/next'
+
+const handler = createAPIRouteHandler()
+
+export const GET = handler
+export const POST = handler