"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
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(
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
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
the best approach is to not call the api at all. just run the logic of that api route in the server component directly
10 Replies
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
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?
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
Indian oil sardineOP
Ok, let me try
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
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
export const revalidate = 0
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
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
Delete the issue from the database in a server action, then run revalidatePath/revalidateTag