API endpoint not working in client component
Answered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
i have an endpoint
when i fetch the API from my client component it gives me an error
(/api/get_news)
which returns an array that has all the newswhen i fetch the API from my client component it gives me an error
TypeError: Invalid URL, (code: "ERR_INVALID_URL", input: "/api/get_news")
then after that it makes like 10 requests to the same API but this time it returns status code 200// app/api/get_news/route.ts
import { db, NewsSchema } from "@/db/drizzle"
import { NextResponse } from "next/server"
async function handler() {
const serverNews = await db.select().from(NewsSchema)
return NextResponse.json({
serverNews,
})
}
export { handler as GET }
// app/news/page.tsx
"use client"
// import Background from "../components/background"
// import GameNew from "./components/game-new"
// import Header from "../components/header"
interface _GameNew {
title: string
content: string
}
export default async function News() {
const data = await fetch("/api/get_news")
const news = (await data.json()) as _GameNew[]
return <></>
Answered by James4u
and also in the server component, the correct approach is to query out directly inside the rsc, not hitting your own api route
24 Replies
Philippine CrocodileOP
@Philippine Crocodile you have "use client" in the top of your page and as you are saying it's a client component
and client component can't be an async function
Philippine CrocodileOP
it already has "use client"
yeah, then how it's async function?
Philippine CrocodileOP
oh, that may be the problem
yeah true, but it works
it should throw me an error now that i remember
also even in the server component, you can't use relative api path
you should use a full api route when you do a fetch
and also in the server component, the correct approach is to query out directly inside the rsc, not hitting your own api route
Answer
Philippine CrocodileOP
why should i?
i mean
what's the reason of not using relative api paths
oh yes, i know that
now that i think i should probably just make this a server component
that fetch is performed on the server, how can you use relative path?
Philippine CrocodileOP
i mean if it is a client component
I can't see the whole codebase but at least from what I can see, it should be a server component
if ti's a client component, you can use a relative path - but you should do that inside useEffect
Philippine CrocodileOP
thanks
your welcome!
Sun bear
cant use relative paths on the server because it doesnt know what the request should be relative to. Fetching relative paths works on the client because its always relative to the current domain of that page.
client components also run on the server so any fetch that takes place on the server when its running a client component needs to be relative
client components also run on the server so any fetch that takes place on the server when its running a client component needs to be relative