Next.js Discord

Discord Forum

"Fetch failed" error when trying to build "npm run build", but it works perfectly when on developmen

Answered
Indian oil sardine posted this in #help-forum
Open in Discord
Avatar
Indian oil sardineOP
I'm using NextJS for both frontend and backend
The API is in api/issues/route.tsx folder

I'm making API request by using fetch function

const request = await fetch(${process.env.NEXT_PUBLIC_API_URL}/issues, {
method: "GET",
cache: "no-store",
});
const response = await request.json();
And everything works fine when I'm in development mode "npm run dev", but when I'm trying to build the project by terminal "npm run build", I'm getting this error "TypeError: fetch failed"

I know that the problem occurs because the API works in development mode and when I turn it off to make a build, the API URL becomes inactive

My question is what is the best approach for calling the API and having no problem when on build

Thanks
Answered by joulev & fuma pray for Schneider
the best approach is to not call the api at all. just run the logic of that api route in the server component directly
View full answer

10 Replies

Avatar
joulev & fuma pray for Schneider
the best approach is to not call the api at all. just run the logic of that api route in the server component directly
Answer
Avatar
Indian oil sardineOP
Thanks but some of my components are client components. And I will have to use axios and I will get the same error. Is there another way?
Avatar
joulev & fuma pray for Schneider
client components shouldn't cause the error, because you cannot have async client components
for client components, you should continue fetching the api route inside useEffect or with react-query/swr
Avatar
Indian oil sardineOP
Ok, let me try
Avatar
Indian oil sardineOP
I did like you said and it worked, but one more question

My issues.tsx page looks like this, where it gets the list of issues from <Issues_table />
The page is static, and when I deleted all the issues from database, it still displays the old issues
How can I make it dynamic

return (
#Unknown Channel
<div className="page_content space-y-2">
<Suspense fallback={<Loading_skeleton />}>
<Issues_toolbar />
<Issues_table />
</Suspense>
</div>
</>
);

Thanks again
It displays them even after page reload
Avatar
joulev & fuma pray for Schneider
export const revalidate = 0
Avatar
Indian oil sardineOP
It helped when I'm reloading, but when I delete the issue from database and don't reload, the <Issues_table /> component still displays the old data

I have plced this 2 lines in both curent page and in <Issues_table /> component
export const dynamic = "force-dynamic";
export const revalidate = 0;

The build now shows that /issues (curent) page is dynamic, but it's displaying the old data, even when navigation to a few other pages and coming back, without reload
All the other pages that are getting the data with prisma are working fine
Avatar
joulev & fuma pray for Schneider
Delete the issue from the database in a server action, then run revalidatePath/revalidateTag