Help: API Error

Unanswered

Florida White posted this in #help-forum

Florida WhiteOP

2024-01-05T23:38:29.000Z

Hey, when i try to make an API call with app/bday/[id]/page.js i sometimes receive the error error.log but not everytime. Im pretty new to next js and i hope i didnt do anything wrong. My API route is inside app/api/bday/user/route.js.

I try to accomplish that everytime i send the API call i get the json object defined in route.js back and display some information but its not working. I hope someone could help :3

EDIT

Im using Next JS 13 with the app directory

I also dont understand what the error means TypeError: Response body object should not be disturbed or locked

Code chunks:

page.js

'use client';
import React, { useState, useEffect } from 'react';
import utilStyles from '@/app/util.module.css';
import Loading from '@/app/loading/loading';

async function getUserData(uuid, callback) {
    const fetched = await fetch('/api/bday/user', {
        method: 'POST',
        body: JSON.stringify({ id: uuid })
    })
    callback(await fetched.json());
}

export default function BDay({ params }) {
    const [isLoading, setLoading] = useState(true);
    const [userData, setUserData] = useState({});

    useEffect(() => {
        getUserData(params.id, (userData) => {
            setUserData({...userData});
            setLoading(false);
        });

    });
    return <main className={utilStyles.centerf}>
        {isLoading ? <Loading/> : <p>{userData.username}</p>}
    </main>
}

route.js

export async function POST(request) {
    return new Response(JSON.stringify({
        username: 'fluffy',
        birthdate: 696969
    }), { status: 200 })
}

3 Replies

Florida WhiteOP

2024-01-05T23:38:51.000Z

error.log

 â¨¯ TypeError: Response body object should not be disturbed or locked
    at extractBody (node:internal/deps/undici/undici:4507:17)
    at new Request (node:internal/deps/undici/undici:5487:48)
    at new NextRequest (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\web\spec-extension\request.js:33:14)
    at NextRequestAdapter.fromNodeNextRequest (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\web\spec-extension\adapters\next-request.js:94:16)
    at NextRequestAdapter.fromBaseNextRequest 
(D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\web\spec-extension\adapters\next-request.js:70:35)
    at doRender (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:1329:73)
    at cacheEntry.responseCache.get.routeKind

(D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:1552:34)
    at ResponseCache.get (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\response-cache\index.js:49:26)
    at DevServer.renderToResponseWithComponentsImpl (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:1460:53)
    at D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:990:121
    at NextTracerImpl.trace (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\lib\trace\tracer.js:104:20)
    at DevServer.renderToResponseWithComponents (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:990:41)
    at DevServer.renderPageComponent (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:1843:35)
    at async DevServer.renderToResponseImpl (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:1881:32)
    at async DevServer.pipeImpl (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\base-server.js:909:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-v2\node_modules\next\dist\server\next-server.js:266:17)
    at async DevServer.handleRequestImpl (D:\Projects\OneDrive\Dokumente\Projects\scrapyard\js\Next JS\bday-
v2\node_modules\next\dist\server\base-server.js:805:17)

Ray

2024-01-06T04:58:42.000Z

try this

// page.js
...
useEffect(() => {
        getUserData(params.id, (userData) => {
            setUserData({...userData});
            setLoading(false);
        });

 }, []);

...

// route.js

export async function POST(request) {
    return Response.json({
        username: 'fluffy',
        birthdate: 696969
    })
}