SRD75 commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which example does this report relate to?

cms-wordpress

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

npm run dev

Describe the Bug

npx create-next-app --example cms-wordpress cms-wordpress-app
cd cms-wordpress-app
copy the .env.local.example to a new .env.local, containing:
```
WORDPRESS_API_URL=https://sdoig-nextjs.local/graphql
```

Only required if you want to enable preview mode

WORDPRESS_AUTH_REFRESH_TOKEN=

WORDPRESS_PREVIEW_SECRET=

4. At `https://sdoig-nextjs.local/wp-admin/`, confirm `WPGraphQL` plugin activated
5. At `https://sdoig-nextjs.local/wp-admin/admin.php?page=graphql-settings`, confirm GraphQL endpoint = graphql
6. Back in the cms-wordpress-app terminal, I run `npm install`, and then `npm run dev`, and then `http://localhost:3000/` displays the error:

1 of 1 unhandled error Server Error TypeError: fetch failed

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source lib\api.ts (13:14) @ async fetchAPI

11 | 12 | // WPGraphQL Plugin must be enabled

13 | const res = await fetch(API_URL, { | ^ 14 | headers, 15 | method: 'POST', 16 | body: JSON.stringify({ Call Stack async getAllPostsForHome

I find this strange, as WPGraphQL Plugin is enabled at https://sdoig-nextjs.local/wp-admin/

Expected Behavior

npm run dev should load the front end and fetch the home page posts without an error.

To Reproduce

Create a new local website using LocalWP, then follow the steps above in Describe the Bug.

missweizhang commented 1 year ago

same error

j0w0 commented 1 year ago

I ran into this issue and resolved it by:

using HTTP protocol in the WORDPRESS_API_URL in .env.local file
added a remotePattern in next.config.js file for pulling in remote images from Wordpress
updated the site URLs in the Wordpress settings dashboard to also use the HTTP protocol
components/avatar is still using the layout prop - remove that and add the required height and width props instead

sgfanega commented 1 year ago

I ran into this issue and resolved it by:

using HTTP protocol in the WORDPRESS_API_URL in .env.local file

added a remotePattern in next.config.js file for pulling in remote images from Wordpress

updated the site URLs in the Wordpress settings dashboard to also use the HTTP protocol

components/avatar is still using the layout prop - remove that and add the required height and width props instead

Hi @j0w0,

What do you mean by "using HTTP protocol in the WORDPRESS_API_URL in .env.local file"? Instead of "https://sdoig-nextjs.local/graphql" you did "http://sdoig-nextjs.local/graphql"? (This example is based on OP's endpoint).

Would love to see what you did visually!

Thanks

vercel / next.js

cms-wordpress-app server error: WPGraphQL Plugin must be enabled #50450