ruleとcommentの個数を返すようにした

components/apiprovider.tsx

@@ -1,10 +1,17 @@
 import { createContext, useState, useEffect, useContext } from "react";
-import { Book, Rule, Comment, Category, ApiReturnMsg } from "lib/types";
+import {
+  Book,
+  BookInfo,
+  Rule,
+  Comment,
+  Category,
+  ApiReturnMsg,
+} from "lib/types";
 import { useRouter } from "next/router";
 
 interface ApiContextI {
   fetchAll: () => void;
-  books: Book[];
+  books: BookInfo[];
   currentBook: Book;
   rules: Rule[];
   categories: Category[];
@@ -30,7 +37,7 @@ const emptyBook = () => ({
 });
 export function ApiProvider(props: { children: any }) {
   const { query } = useRouter();
-  const [books, setBooks] = useState<Book[]>([]);
+  const [books, setBooks] = useState<BookInfo[]>([]);
   const [currentBook, setCurrentBook] = useState<Book>(emptyBook());
   const [rules, setRules] = useState<Rule[]>([]);
   useEffect(() => {
@@ -66,7 +73,7 @@ export function ApiProvider(props: { children: any }) {
   const fetchAll = () => {
     void (async () => {
       const res = await fetch("/api/fetch_book");
-      const resData = (await res.json()) as Book[];
+      const resData = (await res.json()) as BookInfo[];
       setBooks(resData);
     })();
   };

components/bookitem.tsx

@@ -61,7 +61,7 @@ export const BookItem = (props: {
               size="small"
               startIcon={<DescriptionOutlinedIcon fontSize="small" />}
             >
-              {/*book.rules.length*/}
+              {book.rulesNum}
             </Button>
           </Link>
           <Link href={`/?book=${book.name}`}>
@@ -71,7 +71,7 @@ export const BookItem = (props: {
               size="small"
               startIcon={<ChatOutlinedIcon fontSize="small" />}
             >
-              {/*book.rules.reduce((prev, r) => prev + r.comments.length, 0)*/}
+              {book.commentsNum}
             </Button>
           </Link>
         </Grid>

lib/types.ts

@@ -13,6 +13,7 @@ export const bookInclude = Prisma.validator<Prisma.BookInclude>()({
 });
 const book = Prisma.validator<Prisma.BookArgs>()({ include: bookInclude });
 export type Book = Prisma.BookGetPayload<typeof book>;
+export type BookInfo = Book & { rulesNum: number; commentsNum: number };
 
 export const ruleInclude = Prisma.validator<Prisma.RuleInclude>()({
   comments: {

pages/api/fetch_book.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import prisma from "lib/prisma";
-import { bookInclude } from "lib/types";
+import { bookInclude, bookInclude2 } from "lib/types";
 
 export default function fetchBooks(req: NextApiRequest, res: NextApiResponse) {
   void (async (req, res) => {
@@ -13,7 +13,28 @@ export default function fetchBooks(req: NextApiRequest, res: NextApiResponse) {
         status = 500;
         console.log(err);
       });
+    const dataInfo = await Promise.all(
+      data?.map(async (b) => ({
+        ...b,
+        rulesNum: (
+          await prisma.rule.findMany({
+            select: { id: true },
+            where: { bookId: b.id },
+          })
+        ).length,
+        commentsNum: (
+          await prisma.comment.findMany({
+            select: { id: true },
+            where: {
+              category: {
+                bookId: b.id,
+              },
+            },
+          })
+        ).length,
+      }))
+    );
     await prisma.$disconnect();
-    res.status(status).json(data || []);
+    res.status(status).json(dataInfo || []);
   })(req, res);
 }