Next.js Discord

Discord Forum

API endpoint not working in client component

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Avatar
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 <></>
Image
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

Avatar
Philippine CrocodileOP
Image
Avatar
@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
Avatar
Philippine CrocodileOP
it already has "use client"
Avatar
yeah, then how it's async function?
Avatar
Philippine CrocodileOP
oh, that may be the problem
yeah true, but it works
Image
it should throw me an error now that i remember
Avatar
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
Avatar
and also in the server component, the correct approach is to query out directly inside the rsc, not hitting your own api route
Answer
Avatar
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
Avatar
that fetch is performed on the server, how can you use relative path?
Avatar
Philippine CrocodileOP
i mean if it is a client component
Avatar
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
Avatar
Philippine CrocodileOP
thanks
Avatar
your welcome!
Avatar
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