refactor: query by drizzle query

schema.ts

@@ -23,7 +23,11 @@ export const games = sqliteTable("Games", {
     .notNull(),
 });
 
-export const gamesRelations = relations(games, ({ many }) => ({
+export const gamesRelations = relations(games, ({ one, many }) => ({
+  madamis: one(madamis, {
+    fields: [games.madamisId],
+    references: [madamis.id],
+  }),
   gameUsers: many(gameUsers),
 }));
 
@@ -48,3 +52,14 @@ export const gameUsers = sqliteTable("GameUsers", {
     .references(() => users.id)
     .notNull(),
 });
+
+export const usersToGamesRelations = relations(gameUsers, ({ one }) => ({
+  game: one(games, {
+    fields: [gameUsers.gameId],
+    references: [games.id],
+  }),
+  user: one(users, {
+    fields: [gameUsers.userId],
+    references: [users.id],
+  }),
+}));

src/apis/game.ts

@@ -1,9 +1,9 @@
 import { drizzle } from "drizzle-orm/d1";
 import { Hono } from "hono";
-import { games, gameUsers, madamis } from "../../schema";
+import { games, gameUsers } from "../../schema";
 import { z } from "zod";
 import { zValidator } from "@hono/zod-validator";
-import { and, eq } from "drizzle-orm";
+import { eq } from "drizzle-orm";
 
 const gamesPostSchema = z.object({
   madamisId: z.number().int(),

src/apis/madamis.ts

@@ -1,10 +1,12 @@
 import { drizzle } from "drizzle-orm/d1";
 import { Hono } from "hono";
-import { games, gameUsers, madamis, users } from "../../schema";
+import { madamis } from "../../schema";
 import { z } from "zod";
 import { zValidator } from "@hono/zod-validator";
 import { eq } from "drizzle-orm";
 
+import * as schema from "../../schema";
+
 const madamisPostSchema = z.object({
   title: z.string().min(1),
   link: z.string().url(),
@@ -21,41 +23,23 @@ const madamisApi = new Hono<{ Bindings: Env }>();
 
 export const madamisApp = madamisApi
   .get("/", async (c) => {
-    const db = drizzle(c.env.DB);
-
-    // TODO: SQLを勉強すべき
-    const madamisList = await db.select().from(madamis);
-    const gameList = await db.select().from(games);
-    const gameUserList = await Promise.all(
-      gameList.map((g) =>
-        db
-          .select()
-          .from(gameUsers)
-          .where(eq(gameUsers.gameId, g.id))
-          .leftJoin(users, eq(gameUsers.userId, users.id))
-      )
-    );
+    const db = drizzle(c.env.DB, { schema });
 
-    const result = madamisList.map((m) => {
-      return {
-        ...m,
-        games: gameList
-          .filter((g) => g.madamisId === m.id)
-          .map((g) => ({
-            ...g,
-            gameUsers: gameUserList
-              .filter((gu) => gu[0].GameUsers.gameId === g.id)
-              .flatMap((gu) =>
-                gu.map((u) => ({
-                  ...u.Users!,
-                  gm: Boolean(u.GameUsers.gm),
-                }))
-              ),
-          })),
-      };
+    const query = await db.query.madamis.findMany({
+      with: {
+        games: {
+          with: {
+            gameUsers: {
+              with: {
+                user: true,
+              },
+            },
+          },
+        },
+      },
     });
 
-    return c.json(result);
+    return c.json(query);
   })
   .post("/", zValidator("json", madamisPostSchema), async (c) => {
     const db = drizzle(c.env.DB);

src/pages/components/GameState.tsx

@@ -9,19 +9,24 @@ import {
 import { PencilSimple } from "@phosphor-icons/react";
 import { useGameModalStore } from "../stores/gameModalStore";
 
+// 型を定義から取りたいが.. https://github.com/drizzle-team/drizzle-orm/discussions/1483
 export const GameState = ({
-  madamisId,
   game,
 }: {
-  madamisId: number;
   game: {
     id: number;
+    madamisId: number;
     date: string;
     gameUsers: ReadonlyArray<{
       id: number;
-      gm: boolean;
-      name: string;
-      color: string;
+      gm: number;
+      gameId: number;
+      userId: number;
+      user: {
+        id: number;
+        name: string;
+        color: string;
+      };
     }>;
   };
 }) => {
@@ -45,7 +50,7 @@ export const GameState = ({
             variant="light"
             radius="xl"
             onClick={() => {
-              editOpen(madamisId, game.id);
+              editOpen(game.madamisId, game.id);
             }}
           >
             <PencilSimple />
@@ -59,9 +64,9 @@ export const GameState = ({
                 u.gm ? "orange" : colorScheme === "dark" ? "gray" : "gray.1"
               }
               size="sm"
-              c={u.gm ? "white" : u.color}
+              c={u.gm ? "white" : u.user.color}
             >
-              {u.name}
+              {u.user.name}
             </Badge>
           ))}
         </Group>