Next.js Discord

Discord Forum

API endpoint not working in client component

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
i have an endpoint (/api/get_news) which returns an array that has all the news

when 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
View full answer

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
yeah, then how it's async function?
@James4u and client component can't be an async function
Philippine CrocodileOP
oh, that may be the problem
@James4u yeah, then how it's async function?
Philippine CrocodileOP
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
@James4u you should use a full api route when you do a fetch
Philippine CrocodileOP
why should i?
i mean
what's the reason of not using relative api paths
now that i think i should probably just make this a server component
@Philippine Crocodile what's the reason of not using relative api paths
that fetch is performed on the server, how can you use relative path?
@James4u that fetch is performed on the server, how can you use relative path?
Philippine CrocodileOP
i mean if it is a client component
@Philippine Crocodile now that i think i should probably just make this a server component
I can't see the whole codebase but at least from what I can see, it should be a server component
@Philippine Crocodile i mean if it is a client 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