CloudFlareにデプロイするためのRemixプロジェクトでテーブルの要素をリクエストからの情報で絞り込んで表示する（クエリパラメーター）

概要

リクエストの情報（クエリパラメーター）で表示する要素を絞り込んでみる。

前提

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

方法

今回はレコードのis_completeがtrueのものだけをパスパラメーターを利用した絞り込みで取得できるように実装してみる。また、前回実装した「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, request }: LoaderFunctionArgs) => {
     const url = new URL(request.url);
     const searchParams = url.searchParams;
     const isCompleteParam = searchParams.get("isComplete");
     const isComplete = isCompleteParam === "true" ? true : false;
   
     const isTrue = 1; // フラグONの意味 マジックナンバー申し訳ない。。
   
     try {
       const tasks = await context.db.tasks.findMany({
         where: {
           deleted_at: null,
           ...(isComplete && { is_complete: isTrue }),
         },
       });
       return tasks;
     } catch (error) {
       console.error("Failed to load tasks:", error);
       throw new Response("Internal Server Error", { status: 500 });
     }
   }
   

2. これで実装そのものは完了なのでnpm run devを実行して/tasks?isComplete=true にアクセスし、下記のようにidが2, 6, 10のものが表示されるか確認

   

3. その後、クエリパラメーターを削除し/tasksにアクセスし、deleted_atがnullのものだけが表示されていることを確認

   

ここまで同一の挙動なら一旦実装完了

次の実装に備えて、各種値のクエリパラメーターに対応させてみたコードが下記である。（「完了・未完了」「削除済み・未削除」「タスクのカテゴリID」でそれぞれ組み合わせて絞り込めるようになった）

/tasks?isDeleted=true&taskCategoryMasterId=3などにアクセスしてみると挙動が体験できると思う。

app/routes/tasks-loader.ts

import type { LoaderFunctionArgs } from "@remix-run/cloudflare";

export const loader = async ({ context, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const searchParams = url.searchParams;

  const isCompleteParam: unknown = searchParams.get("isComplete");
  const isComplete: boolean = isCompleteParam === "true" ? true : false;

  const isDeletedParam: unknown = searchParams.get("isDeleted");
  const isDeleted: boolean = isDeletedParam === "true" ? true : false;

  const taskCategoryMasterIdParam: unknown = searchParams.get("taskCategoryMasterId");
  const taskCategoryMasterId: number|null = taskCategoryMasterIdParam ? Number(taskCategoryMasterIdParam) : null;

  const isTrue = 1; // フラグONの意味 マジックナンバー申し訳ない。。

  try {
    const tasks = await context.db.tasks.findMany({
      where: {
        ...(isComplete && { is_complete: isTrue }),
        ...(isDeleted && { deleted_at: {not: null}}),
        ...(taskCategoryMasterId !== null && { task_category_master_id: taskCategoryMasterId }),
      },
    });
    return tasks;
  } catch (error) {
    console.error("Failed to load tasks:", error);
    throw new Response("Internal Server Error", { status: 500 });
  }
}