如何将Next.js后端数据传递到前端？

Question

我正在使用 Next.js，并且有一个非常简单的代码，其中前端组件正在调用后端端点。后端正确检索到数据，但前端每次只收到一个空对象。

这是从数据库检索数据的后端 API 端点。

文件：

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);
}

这个后端代码运行良好。我可以看到从数据库检索到的记录：

--> 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":"-"}]

现在问题出在前端。 文件：

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

前端组件调用后端API端点，但它在

console.log()

中打印的数据始终是一个空对象

{}

。

index.tsx:29 => ClientOrders retrieved from the backend = {}

知道发生了什么事吗？为什么前端组件收不到从数据库检索的数据？

Answer 1

这样称呼它：

const clientOrdersData = await (await fetch('http://localhost:3000/api/clientOrders')).json();