I am using headless wordpress with next.js as described here https://vercel.com/guides/wordpress-with-vercel. It will not compile the next.js site because the connection is refused to the local Wordpress site.
I am able to access the local site using the URL - http://hamletstudiowp.local/
I have updated the .env.local file to include
WORDPRESS_API_URL= http://hamletstudiowp.local/graphql
Any clues would be greatly appreciated!
Ken
Hi, I was able to reproduce the error by running npm run dev with the Local server turned off. If you can’t connect to the regular URL either, can you double-check that you have the site running in the top right of the Local UI. There is an option to Start site or Stop site up in the top-right.
Thanks, it is definitely turned on.
I can put the URL in the browser - and it connects. (gives me an error about lack of query which is correct)
Please let me know if you have any other thoughts. From what I have read on StackOverflow etc regarding this error - it appears it wants to see 127.1.0.0 rather than localhost. If others have this working, not sure why it is having an issue with the local url.
Thanks for confirming. Can you post a screenshot of the error you see when you try to run Next.js?
Thanks again.
Please let me know if this is sufficient.
screenshot of connection with local browser:
Error from next.js
event - compiled client and server successfully in 1077 ms (579 modules)
error - TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:14062:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchAPI (webpack-internal:///./lib/api.ts:17:17)
at async getAllPostsForHome (webpack-internal:///./lib/api.ts:63:18)
at async getStaticProps (webpack-internal:///./pages/index.tsx:88:22)
at async Object.renderToHTML (/mnt/c/git/cms-wordpress-app/node_modules/next/dist/server/render.js:385:20)
at async doRender (/mnt/c/git/cms-wordpress-app/node_modules/next/dist/server/base-server.js:720:34)
at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/mnt/c/git/cms-wordpress-app/node_modules/next/dist/server/base-server.js:828:28)
at async /mnt/c/git/cms-wordpress-app/node_modules/next/dist/server/response-cache/index.js:83:36 {
cause: Error: connect ECONNREFUSED ::1:80
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1471:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 80
},
page: '/'
Do you see the “address:” line is that normal?
No, that doesn’t look normal to me, but it does appear to be a valid entry in /etc/hosts
Let me see if I can get some additional eyes on this for you
Hi there @hamlethub - welcome to the Local community! 
Thanks @JeffEverhart383 for your help here.
It might be helpful to take a peek at your Local logs at this point, can you share them? Here’s how to obtain them:
Sam
local-logs.zip (2.2 KB)
Thanks!
Please let me know if you need anything else
BTW - thanks for the video - have not gone through the entire video yet but very succinct which is awesome!
found this on Udemy as well - just FYI
https://www.udemy.com/course/next-js-wordpress/
I am not sure if this came through - sorry if it is a dupe
local-logs.zip (2.2 KB)
@sambrockway do you need any further information from me? Please let me know if I can help.
Hi there @hamlethub,
I’ll take a look at the logs to see if anything stands out, thank you!
I also wanted to mention - have you tried the Atlas Add On and tried spinning up a headless site that way?
Here’s a help doc with more info on that:
Sam
I am new to this…Are you recommending that because it is easier? If so I will look into it!
Are you still working on this, or are you saying GraphQl will not work in this scenario?
@sambrockway I am still stuck on this ECONNREFUSED error. I uninstalled everything and started from scratch, and still receiving the same error. Any luck with the logs I sent?
I just used the crash course video verbatim, with Apollo, and it will not connect with that either.
It just comes back with “Error: fetch failed”
1 of 1 unhandled error
Server Error
Error: fetch failed
Any thoughts would be greatly appreciated!
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
new ApolloError
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/errors/errors.cjs (34:28)
<unknown>
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/core/core.cjs (1598:19)
both
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/utilities/utilities.cjs (986:53)
<unknown>
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/utilities/utilities.cjs (979:72)
new Promise
<anonymous>
Object.then
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/utilities/utilities.cjs (979:24)
Object.error
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/@apollo/client/utilities/utilities.cjs (987:49)
notifySubscription
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/zen-observable/lib/Observable.js (140:18)
onNotify
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/zen-observable/lib/Observable.js (179:3)
SubscriptionObserver.error
file:///mnt/c/git/cms-crashcourse/crash-course-headless-wp-next-wpgraphql/node_modules/zen-observable/lib/Observable.js (240:7)
local-logs1.zip (2.5 KB)
@JeffEverhart383 Do you have any thoughts on this? I can’t seem to get through this.
Thanks
@hamlethub thanks for reaching back out, and apologies for the delay. Did you try out the Atlas add-on that @sambrockway suggested? That was my suggestion, as that will run a Node project in a different way (essentially letting Local manage that piece) that might give us something else to go on if it fails or succeeds.
Ok, I will try that!
@JeffEverhart383 I started a new site using the Atlas add-on, and I am still receiving a similar error. With the Atlas add-on, the site will not load at all (with the graphql the site would load, but received error when using node). I receive the following error:
The page you requested generated a server error and could not be processed.
If you continue to get this message after refreshing, try restarting the Local site.
The backend (admin) loads correctly… I have attached the logs. Can you please take a look?
Thanks!
local-logs2.zip (6.1 KB)