API通信でfetchを使う場面と使わない場面の違いが分からない

Question

現在、Next.jsを使いアプリ制作をしています。アプリの機能としてはCRUD操作やAI(Open AI)を使ったものになります。なので、その機能を実現させるためにAPIを作成しました。そこでデータベース(supabase)のCRUD操作に関してはfetchは使用せず、Open AIのほうに関してはfetchを使用しました。どちらもAPIを作成するという点は同じなのにやり方が違うはなぜなのか気になり質問させていただきました。初学者で至らない点も多いですが、回答していただけると幸いです。

・知りたいこと
fetchを使うときと使わないときの違いを知りたい。（データベース操作のAPIではfetchを使わないのに、Open AIのAPIではfetchを使うのはなぜか知りたい。）

・使用している技術
Next.js(typescript)
supabase, prisma
OpenAI API

コード
app/api/chatgpt/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const { prompt } = await req.json();

    const apiKey = process.env.OPENAI_API_KEY;
    const apiEndPoint = process.env.OPENAI_API_URL;

    if (!apiKey) {
      console.error("API keyがありません。");
      return NextResponse.json(
        { error: "API keyがありません。" },
        { status: 500 }
      );
    }

    if (!apiEndPoint) {
      console.error("API URLがありません。");
      return NextResponse.json(
        { error: "API URLがありません。" },
        { status: 500 }
      );
    }

    const response = await fetch(`${apiEndPoint}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify({
        model: "gpt-4o-mini",
        messages: [{ role: "user", content: prompt }],
        max_tokens: 500,
        stream: true,
        temperature: 1.5
      }),
    });

    //API処理が正常にできない場合
    if (!response.ok) {
      console.error(`APIリクエスト失敗: ${response.status} ${response.statusText}`);
      const errorData = await response.json();
      console.error("エラーメッセージ:", errorData);
      return NextResponse.json(
        { error: "APIリクエストが失敗しました。" },
        { status: response.status }
      );
    }

    // ストリームの処理
    const reader = response.body?.getReader();
    const stream = new ReadableStream({
      async pull(controller) {
        const { done, value } = await reader!.read();
        if (done) {
          controller.close();
          return;
        }
        controller.enqueue(value);
      },
    });

    return new Response(stream);
    
  } catch (error) {
    console.error("サーバーエラー:", error);
    return NextResponse.json(
      { error: "responseの取得に失敗しました。" },
      { status: 500 }
    );
  }
}

app/api/todo/route.ts

import { NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient(); // インスタンス化

// データベースに接続する
export async function main() {
    try {
        await prisma.$connect();
    } catch (err) {
        return Error("DB接続に失敗しました");
    }
}

// 全タスクの取得API
export const GET = async () => {
    try {
        await main();
        const alltodos = await prisma.todos.findMany();
        return NextResponse.json({message:"success", alltodos }, {status: 200});
    } catch (err) {
        return NextResponse.json({message:"Error", err }, {status: 500})
    } finally {
        await prisma.$disconnect();
    }
}

// タスク追加用API
export const POST = async (req: Request, res: NextResponse) => {
    try {
        const jsondata = await req.json();
        const { title, description, continuedays, checkedDates, startdate, enddate, interval, color } = jsondata
        const formattedStartDate = new Date(startdate.replace(/\//g, '-'));
        const formattedEndDate = new Date(enddate.replace(/\//g, '-'));
        await main();

        const posttodo = await prisma.todos.create({data: { title, description, continuedays, checkedDates, startdate:formattedStartDate, enddate:formattedEndDate, interval, color }})
        return NextResponse.json({message:"success", posttodo }, {status: 201});
    } catch (err) {
        return NextResponse.json({message:"Error", error:err }, {status: 500})
    } finally {
        await prisma.$disconnect();
    }
}

Answer 1

解決しました。見間違えでした。