Fetch fails during build
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
Hey guys,
I'm running a Payload 3 project with Nextjs 15 and I have the following issue.
The data is being fetched with GraphQL from the local API routes that Payload provides. Problem is that during build those routes aren't live yet (or so I think) and the fetching fails.
I did encapsulate the fetches in a try/catch block, which helped with building the project, but the error
I think this is a fairly common problem, but I don't know how to fix it. Can you please help?
I'm running a Payload 3 project with Nextjs 15 and I have the following issue.
The data is being fetched with GraphQL from the local API routes that Payload provides. Problem is that during build those routes aren't live yet (or so I think) and the fetching fails.
I did encapsulate the fetches in a try/catch block, which helped with building the project, but the error
fetch failed is still there.I think this is a fairly common problem, but I don't know how to fix it. Can you please help?
7 Replies
Cape lionOP
It appears that I should use Payload's local API for fetching on the server, because what I'm doing here, quite logically, appears to be an anti-pattern:
https://nextjs-faq.com/fetch-api-in-rsc
https://nextjs-faq.com/fetch-api-in-rsc
@Cape lion It appears that I should use Payload's local API for fetching on the server, because what I'm doing here, quite logically, appears to be an anti-pattern:
https://nextjs-faq.com/fetch-api-in-rsc
Short mackerel
This is actually a unofficial, private opinion and I am sure it depends from case to case. NextJS's docs clearly state that you are allowed to do
fetch requests on the server side - https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed@Short mackerel This is actually a unofficial, private opinion and I am sure it depends from case to case. NextJS's docs clearly state that you are allowed to do `fetch` requests on the server side - https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
Cape lionOP
How should I solve this then, do you have any ideas?
The problem is not fetching on the server-side, but fetching from localhost. Payload 3 is now integrated into Nextjs and the API routes that provides are actually part of the Nextjs app itself. So I'm trying to fetch from my own API routes in a way, which are not live during build, but only during dev.
The problem is not fetching on the server-side, but fetching from localhost. Payload 3 is now integrated into Nextjs and the API routes that provides are actually part of the Nextjs app itself. So I'm trying to fetch from my own API routes in a way, which are not live during build, but only during dev.
Short mackerel
If those are not statically generated pages, adding
export const dynamic = 'force-dynamic' on top of your page.tsx could solve the issueCape lionOP
Sadly, I'd like to have them statically generated. 😄 Those are blog-type of pages and the content is not going to change, so ideally they should be static.
Short mackerel
I think like you said in your first comment - since the server is not online yet there is no server to call. Maybe using a direct connection to the db or third party app would be the solution
Cape lionOP
Thanks. Yeah, I guess I'll have to re-think the whole thing, but it's nice that I can use Payload's local API feature, which already got rid of the errors. Though I can't use GraphQL anymore.