oelbaga / nextjs-mysql-tutorial Goto Github PK

I followed the youtube video and compared the code again here on youtuber. Unfortunately I keep getting this error and I don't know what I did wrong.

my [name].js
`import { useEffect, useState } from "react";
import { useRouter } from "next/router";

export default function Statistics() {
const router = useRouter();
const {playername} = router.query;
const [dataResponse, setdataResponse] = useState([]);
useEffect(() => {
if (!router.isReady) return;
async function getPlayerData() {
const apiUrlEndpoint = http://localhost:3000/api/getdata-lib-router;
const postData = {
method: "Post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
playername: playername,
}),
};

        const response = await fetch(apiUrlEndpoint, postData);
        const res = await response.json();
        setdataResponse(res.levels);
    }
    getPlayerData();
}, [router.query.playername, router.isReady]);
useEffect(() => {
    console.log(dataResponse)
}, [dataResponse])
return(
    <>
        <div>
            {/* {dataResponse.map((levels) => {
                return(
                    <div>
                        <p>{levels.playername}</p>
                        <p>{levels.playerlevel}</p>
                        <br />
                    </div>
                )
            })} */}

            
            {dataResponse.map((levels) => {
                return (
                <div key={levels.playeruuid}>
                    <div>{levels.playername}</div>
                </div>
                );
            })}
        </div>
    </>
)

}`

my getdata-lib-router.js
`import { query } from "../../lib/db";

export default async function handler(req, res) {
const playername = req.body.playername;
try {
const querySql =
"SELECT * FROM levels WHERE playername = ?";
const valueParams = [playername];
const data = await query({ query: querySql, values: valueParams });

res.status(200).json({ levels: data });

} catch (error) {
// unhide to check error
res.status(500).json({ error: error.message });
}
}
//if needed
// export const config = {
// api: {
// externalResolver: true,
// },
// };`