I have encountered a strange issue where no matter what I do, the fetched data is being partially converted to strings. For example, the 'bialko' and 'kcal' fields are supposed to be of type Float in Prisma, yet they are getting casted as Strings when fetched. However, after changing the data type from decimal to double precision, the API endpoint returns the objects correctly. But the fetch operation still behaves unexpectedly. It's worth noting that I am fetching data on the server side!
What I have tried so far: - Recreating the entire database, altering columns, changing data types from numeric to double precision - Running npx prisma generate, prisma migrate, deleting migrations
Backend code:
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,
})
}
Component code:
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
}
EDIT: When I tried fetching data in the CLIENT COMPONENT, everything worked correctly (returned kcal and bialko as numbers). It seems like there is some sort of anomaly happening with next.js FETCH.
useEffect(() => {
;(async () => {
const res = await fetch("http://localhost:3000/api/zestawywo")
const result = await res.json()
console.log("CLIENT", result)
})()
CONSOLE.log OF DATA THAT SHOULD BE FETCHED
{
id: 8,
price: 31.9,
bialko: 58.2,
kcal: 1581,
}
CONSOLE.log OF FETCHED DATA
{
id: 8,
price: 31.9,
bialko: "58.2",
kcal: "1581",
}