typescript - next.js 13 konstig typkonvertering? res.json() nummer till sträng

Jag har ett konstigt problem att oavsett vad jag gör, så blir resultatet av fetch delvis omvandlat till sträng. (id, pris förblir som nummer, bialko/kcal omvandlas till sträng men de är BÅDA deklarerade som Float i Prisma). Efter att ha bytt typ från decimal till dubbel precision, returnerar `api-endpoint` objekten exakt som jag vill. Men fetch gör något som jag verkligen inte förstår. Viktigt att veta, jag hämtar i serverkomponenten!

Vad jag försökte: -Återskapa hela databasen, ändra kolumner, byta datatyper från numeric till double precision -npx prisma generate, prisma migrate, ta bort migrationer

backendkod:

export async function GET(request: Request) {
    const zestawyWo = await prisma.rankings.findMany({
        where: {},
        select: {
            id: true,
            price: true,
            bialko: true,
            kcal: true,
        },
    })

    if (zestawyWo.length == 0) {
        return NextResponse.json(
            {error: "zestawyWo not found"},
            {
                status: 404,
            }
        )
    }

    console.log(typeof zestawyWo[0].bialko)
    console.log(typeof zestawyWo[0].price)
    console.log(zestawyWo)

    return NextResponse.json(zestawyWo, {
        status: 200,
    })
}

komponentkod:

async function fetchAllZestawy(orderby?: string): Promise<Zestaw[]> {
    const res = await fetch(`http://localhost:3000/api/zestawywo`)
    const data: Zestaw[] = await res.json()
    console.log(typeof data[0].bialko)    // string
    console.log(data)   //  result pasted below
    return data
}

REDIGERA: försökte hämta data i KLIENTKOMPONENT och allt fungerade som det skulle (returnerade kcal och bialko som ett nummer). Verkar som om det pågår något konstigt med next.js FETCH.

useEffect(() => {
        ;(async () => {
            const res = await fetch("http://localhost:3000/api/zestawywo")
            const result = await res.json()
            console.log("CLIENT", result)
        })()

KONSOL.log AV DATA SOM SKA HÄMTAS

  {
    id: 8,
    price: 31.9,
    bialko: 58.2,
    kcal: 1581,
  }

KONSOLE.log AV HÄMTAD DATA

  {
    id: 8,
    price: 31.9,
    bialko: "58.2",
    kcal: "1581",
  }

Svar #1

Du bör inte skapa och exportera en funktion för varje metod. Du bör försöka följande:

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // your db logic
  res.status(200).json(zestawyWo);
}

Om du vill tillhandahålla en annan återanropning för varje metod kan du göra så här:

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  switch (req.method) {
      case "GET": GET(),
      case "POST": POST(),
      // ...others methods
  }
}

Mer information: https://nextjs.org/docs/api-routes/introduction

Svar #2

Galet att säga, men lyckades lösa problemet genom att ändra localhost till 127.0.0.1 i fetch-URL:en.

const res = await fetch('http://127.0.0.1:3000/api/zestawywo')

Next.js har säkert vissa problem med sin fetch eftersom jag råkade lösa det genom att lösa en annan bugg, för vilken samma metod fungerade: TypeError: fetch misslyckades i serverkomponent