Next.js Discord

Discord Forum

fetching data error | Next.JS, SWR

Answered
Mini Satin posted this in #help-forum
Open in Discord
Mini SatinOP
page.tsx -->

"use client"

import useSWR from "swr"

type TestType = {
    userId: number,
    id: number,
    title: string,
    completed: boolean
}

async function fetcher(key: string) {
  return fetch(key).then((res) => res.json() as Promise<TestType | null>)
}

const Page = () => {

    const { data } = useSWR(`/api/test/1`, fetcher, { refreshInterval: 1000 }) || null
    console.log(data)

    return (
        <div>Test</div>
    )
}

export default Page

api/test/[id]/route.ts -->
export async function GET({params}: {params: {id: string}}) {
    try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`)
        const data = await res.json()
        return Response.json(data)
    } catch (error) {
        return new Response("Internal Error", {status: 500})
    }
}

I get an error when I use it this way. But when I replace {params.id} with '1' I don't get any errors. What is the reason?
Answered by Ray
export async function GET(req: Request, {params}: {params: {id: string}}) {
View full answer

18 Replies

Mini SatinOP
Actually, I wrote
const res = await fetch(https://jsonplaceholder.typicode.com/todos/{params.id})
but it seems broken due to the error in discord.
Answer
@Ray ts export async function GET(req: Request, {params}: {params: {id: string}}) {
Mini SatinOP
How did you write the code in color?
Ray
add a ts or js after the third '`'
@Ray add a ts or js after the third '`'
Mini SatinOP
Thanks for trick
@Ray ts export async function GET(req: Request, {params}: {params: {id: string}}) {
Mini SatinOP
I couldn't understand this part
@Mini Satin Thanks for trick
Ray
the first params from the route handler function is request object
params is in second
@Ray the first params from the route handler function is request object
Mini SatinOP
export async function GET(req: Request, {params}: {params: {id: string}}) {
    try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`)
        const data = await res.json()
        return Response.json(data)
    } catch (error) {
        return new Response("Internal Error", {status: 500})
    }
}

i'm still getting errors
Ray
what error you get?
await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`)
@Ray what error you get?
Mini SatinOP
Internal server error, 500
Ray
export async function GET(req: Request, {params}: {params: {id: string}}) {
    try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/{params.id}`)
        const data = await res.json()
        return Response.json(data)
    } catch (error) {
        console.log(error)
        return new Response("Internal Error", {status: 500})
    }
}
log the error and see
@Ray ts await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`)
Mini SatinOP
I wrote it wrong here, normally I use /todos/${params.id}`)
wait, i will send ss
Ray
it works?
@Ray it works?
Mini SatinOP
yes, thanks for your effort, i appreciate that