I’m working with Next.js and ahave a very simple code where a frontend component is calling a backend endpoint. The backend retrieves the data correctly, but the frontend only receives an empty object every time.
The is the backend API endpoint that retrieves data from the DB.
File: src/app/api/clientOrders/route.ts:
import { prisma } from "@/lib/prisma";
...
export async function GET(request: NextRequest) {
const clientOrders = await prisma.clientOrders.findMany();
console.log("--> clientOrders = " + JSON.stringify(clientOrders));
return NextResponse.json(clientOrders);
}
This backend code works fine. I can see the retrieved records from the DB:
--> clientOrders = [{"id":1,"request_time":"2024-09-11T10:04:05.209Z","done_time":"2024-09-11T10:04:05.209Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":2,"request_time":"2024-09-11T10:19:34.989Z","done_time":"2024-09-11T10:19:34.989Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":3,"request_time":"2024-09-11T10:20:45.861Z","done_time":"2024-09-11T10:20:45.861Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":4,"request_time":"2024-09-11T13:02:51.808Z","done_time":"2024-09-11T13:02:51.808Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":6,"request_time":"2024-09-11T13:04:55.126Z","done_time":"2024-09-11T13:04:55.126Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"}]
Now the problem comes on the front-end.
File: src/components/RestaurantActions/index.tsx:
"use client";
import { prisma } from "@/lib/prisma";
import Image from 'next/image';
const RestaurantActions = () => {
async function getClientOrders() {
const clientOrdersData = await fetch('http://localhost:3000' + '/api/clientOrders', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
console.log("=> ClientOrders retrieved stringified = " + JSON.stringify(clientOrdersData));
}
getClientOrders()
return(
// The component's HTML
)
}
export default RestaurantActions
The frontend component calls the backend API endpoint, but the data the it prints in the console.log() is always an empty object {}.
index.tsx:29 => ClientOrders retrieved from the backend = {}
Any idea what is going on? Why the frontend component doesn’t receive the data retrieved from the database?
1
You need to parse the response to json first
async function getClientOrders() {
const clientOrdersData = await fetch(
'http://localhost:3000' + '/api/clientOrders',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
);
//add this line
const clientOrdersDataJSON = await clientOrdersData.json();
//
console.log(
'=> ClientOrders retrieved stringified = ' +
JSON.stringify(clientOrdersDataJSON)
);
return clientOrdersDataJSON;
}
Working sample: https://stackblitz.com/edit/stackblitz-starters-vwpwir?file=app%2Fpage.tsx
1
Call it like this:
const clientOrdersData = await (await fetch('http://localhost:3000/api/clientOrders')).json();