CloudFlareにデプロイするためのRemixプロジェクトでテーブルの要素を絞り込んで表示してみる

概要

下記の記事でテーブルに入っているすべての要素を一覧的に表示する実装をしてみた。
今回は何かしらの条件をつけて絞り込んで表示してみようと思う。

前提

下記の内容が完了していること。

方法

今回の内容はPrismaのドキュメントで言うところのこちらを使いそう。

取り急ぎ今回は「tasksテーブルのdeleted_atがnullのものだけ一覧に表示する」ようにデータ取得部分を変えてみようと思う。

1. 前回作成したapp/routes/tasks-loader.tsを下記のように修正

   app/routes/tasks-loader.ts

   import type { LoaderFunctionArgs} from "@remix-run/cloudflare";
   
   export const loader = async ({ context }: LoaderFunctionArgs) => {
     try {
       return await context.db.tasks.findMany({
         where: { deleted_at: null },
       });
     } catch (error) {
       console.error("Failed to load tasks:", error);
       throw new Response("Internal Server Error", { status: 500 });
     }
   }
   

2. npm run devを実行後/tasksを確認し、idが4と8と12のdeleted_atにnull以外が入っているものが表示されていなければ作業は完了

   

参考文献