Refactor tag retrieval in ArticlesPage component to Drizzle (#835)

app/(app)/articles/_client.tsx

@@ -48,9 +48,7 @@ const ArticlesPage = () => {
       },
     );
 
-  const { status: tagsStatus, data: tagsData } = api.tag.get.useQuery({
-    take: 10,
-  });
+  const { status: tagsStatus, data: tagsData } = api.tag.get.useQuery();
 
   const { ref, inView } = useInView();
 
@@ -59,6 +57,7 @@ const ArticlesPage = () => {
       fetchNextPage();
     }
   }, [inView]);
+
   return (
     <>
       <div className="mx-2">
@@ -187,14 +186,14 @@ const ArticlesPage = () => {
             <div className="flex flex-wrap gap-2">
               {tagsStatus === "loading" && <PopularTagsLoading />}
               {tagsStatus === "success" &&
-                tagsData.data.map((tag) => (
+                tagsData.data.map(({ title }) => (
                   <Link
-                    key={tag.id}
+                    key={title}
                     // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
-                    href={`/articles?tag=${tag.title.toLowerCase()}`}
+                    href={`/articles?tag=${title.toLowerCase()}`}
                     className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
                   >
-                    {getCamelCaseFromLower(tag.title)}
+                    {getCamelCaseFromLower(title)}
                   </Link>
                 ))}
             </div>

server/api/router/tag.ts

@@ -1,21 +1,23 @@
 import { createTRPCRouter, publicProcedure } from "../trpc";
-import { GetTagsSchema } from "../../../schema/tag";
 import { TRPCError } from "@trpc/server";
+import { post_tag, tag } from "@/server/db/schema";
+import { desc, eq, count } from "drizzle-orm";
 
 export const tagRouter = createTRPCRouter({
-  get: publicProcedure.input(GetTagsSchema).query(async ({ ctx, input }) => {
+  get: publicProcedure.query(async ({ ctx }) => {
     try {
-      const count = await ctx.prisma.tag.count({});
-      const response = await ctx.prisma.tag.findMany({
-        orderBy: {
-          PostTag: {
-            _count: "desc",
-          },
-        },
-        take: input.take,
-      });
+      const data = await ctx.db
+        .select({
+          title: tag.title,
+          count: count(tag.title),
+        })
+        .from(tag)
+        .groupBy(tag.title)
+        .leftJoin(post_tag, eq(post_tag.tagId, tag.id))
+        .limit(10)
+        .orderBy(desc(count(tag.title)));
 
-      return { data: response, count };
+      return { data };
     } catch (error) {
       throw new TRPCError({
         code: "INTERNAL_SERVER_ERROR",

server/db/schema.ts

@@ -80,7 +80,7 @@ export const tag = pgTable(
   {
     createdAt: timestamp("createdAt").defaultNow().notNull(),
     id: bigserial("id", { mode: "number" }).primaryKey(),
-    title: varchar("title", { length: 256 }),
+    title: varchar("title", { length: 256 }).notNull(),
   },
   (t) => {
     return {};