how to call route handler from client side without providing hostname
Answered
American Chinchilla posted this in #help-forum
American ChinchillaOP
is it possible to do like
await fetch("/api/abcde") cause hostname depends if its dev or prod versionAnswered by riský
ohh the issue is params isn't first input in function: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
41 Replies
@American Chinchilla is it possible to do like ts
await fetch("/api/abcde")
cause hostname depends if its dev or prod version
on client, you use relative url like that, on server component you [shouldn't](https://nextjs-faq.com/fetch-api-in-rsc)
if client, it would do the same fetch as if you make a link starting with /
@riský on client, you use relative url like that, on server component you [shouldn't](<https://nextjs-faq.com/fetch-api-in-rsc>)
American ChinchillaOP
Ok so how this relative URL should look Like
await fetch("/api/abcde")American ChinchillaOP
I can show what i have already and what error i get
American ChinchillaOP
oh okay adding the
/ at the beggining worked and now i have problem reading the paramexport async function GET({ params }: { params: { guildId: string } }) TypeError: Cannot read properties of undefined (reading 'guildId')by param i mean
/api/guild/channels/12345where 12345 is guildId
your file is
app/api/guild/channels/[guildId]/route.ts right?American ChinchillaOP
yea
and its in app/api
@American Chinchilla oh okay adding the `/` at the beggining worked and now i have problem reading the param
`export async function GET({ params }: { params: { guildId: string } })`
`TypeError: Cannot read properties of undefined (reading 'guildId')`
ohh the issue is params isn't first input in function: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
Answer
American ChinchillaOP
ohh
this makes sense
always consult the docs is that i do when i get error lol
they have good examples that i can copy from 🙂
American ChinchillaOP
can i also have a question about the structure im doing and for what purpose
@riský always consult the docs is that i do when i get error lol
American ChinchillaOP
i tried but did not see that request argument
ahh yeah it was at very bottom
but now your code works 👀
@American Chinchilla can i also have a question about the structure im doing and for what purpose
American ChinchillaOP
so about this
im doing a dashboard for a discord bot and i have a page
in another subpage for example
how would you approach that @riský ?
im doing a dashboard for a discord bot and i have a page
/dashboard and then /dashboard/[guildId] and im using Context to store current guild being selected so i dont have to check if the id given in url is correct each time and make request to discord api but thenin another subpage for example
/dashboard/[guildId]/form i want to have a form that is able to display a select with all channels this guild has, this requires me to fetch them from api but i need to do that on server side obviously cause of the authorization by token and here comes the problem basically i need to get guild id from context (which requires use client) -> then fetch the channels (server side) -> then come back with the channels array to form component (which also is client side)how would you approach that @riský ?
can you open a new thread for this as its slightly diferent and more people can answer it too
American ChinchillaOP
i mean i actually got answer for that being a route handler i just wanted more points of view
but i think you should just not use context and just check
(its what i do)
also i haven't made route handler in ages as server action >>>
American ChinchillaOP
its not used as server action
yeah ik server action can't/shouldn't/doesnt make sense for all things
American ChinchillaOP
basically in
but in
/dashboard layout.tsx i fetch them in component body cause its server sidebut in
/dashboard/[guildId] i cant cause its client side cause its using contexti feel like context is where all problems come from
why can't both be server side tho?
American ChinchillaOP
"use client"
import { notFound } from "next/navigation"
import { useGuilds } from "@/app/contexts/GuildsContext"
import CurrentGuildContext from "@/app/contexts/CurrentGuildContext"
import { SidebarGuildList } from "@/components/GuildList"
import { Separator } from "@/components/ui/separator"
import GuildSidebarSections from "@/components/GuildSidebarSections"
export default async function ServerLayout({
children,
params,
}: {
children: React.ReactNode
params: { guildId: string }
}) {
const { mutualGuilds } = useGuilds()
const guild = mutualGuilds.find((guild) => guild.id === params.guildId)
if (!guild) {
notFound()
}
return (
<CurrentGuildContext guild={guild}>
<div className="flex items-start h-[calc(100vh-65px)]">
<SidebarGuildList />
<Separator orientation="vertical" />
<GuildSidebarSections />
<Separator orientation="vertical" />
<main>{children}</main>
</div>
</CurrentGuildContext>
)
} cause of the useGuilds context being usedpls don't make your layout client
American ChinchillaOP
oh wait actually i could have just fetched it from api anyway
if you need client in there, make a client file and import into layout
American ChinchillaOP
i think you just made a big change in my thinking
gotta try it out thanks
yeah you should never make a page/client client as it breaks so much
@American Chinchilla oh wait actually i could have just fetched it from api anyway
that is the new server mindset 🙂