gatsby-source-wordpress unable to fetch image from localhost, although image link is correct.

shalawfatah commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Upgrading to the latest gatsby v5 and gatsby-source-wordpress v7, I've been having this issue where I cannot start my application on my computer, as it succeeds from running all queries but later fails the development saying:

Unable to fetch:
https://guidedby2.local/wp-content/uploads/2019/08/hero-single-location-vancouver@2
x-150x44.jpg
---
Reason: connect ECONNREFUSED ::1:443
---
Fetch details:
{
  "attempt": 3,
  "method": "GET",
  "errorCode": "ECONNREFUSED",
  "requestHeaders": {
    "user-agent": "got (https://github.com/sindresorhus/got)",
    "accept-encoding": "gzip, deflate, br"
  }
}
---

  RequestError: connect ECONNREFUSED ::1:443

  - index.js:970 ClientRequest.<anonymous>
    [guidedby-react]/[got]/dist/source/core/index.js:970:111

  - node:events:628 Object.onceWrapper
    node:events:628:26

  - node:events:525 ClientRequest.emit
    node:events:525:35

  - index.js:43 ClientRequest.origin.emit
    [guidedby-react]/[@szmarczak]/http-timer/dist/source/index.js:43:20

  - node:_http_client:494 TLSSocket.socketErrorListener
    node:_http_client:494:9

  - node:events:513 TLSSocket.emit
    node:events:513:28

  - destroy:151 emitErrorNT
    node:internal/streams/destroy:151:8

  - destroy:116 emitErrorCloseNT
    node:internal/streams/destroy:116:3

  - task_queues:82 processTicksAndRejections
    node:internal/process/task_queues:82:21

  - node:net:1300 TCPConnectWrap.afterConnect [as oncomplete]
    node:net:1300:16

When I click on that link, the image is there, and often this link changes to another image, which means images are not fetched overall for some reason.

I use Local by Flywheel to run my Wordpress sever locally, and Gatsby, with Node 18 and NPM 9 to run the Gatsby app. I changed the WP URL from https to http, but nothing changes.

This is all my packages on Gatsby:

  "dependencies": {
    "@apollo/client": "^3.7.1",
    "@hookform/resolvers": "^2.9.10",
    "apollo-upload-client": "^17.0.0",
    "autoprefixer": "^10.4.13",
    "beautiful-react-hooks": "^3.11.2",
    "gatsby": "^5.0.1",
    "gatsby-plugin-add-filters": "^1.0.0",
    "gatsby-plugin-complex-sitemap-tree": "^1.0.2",
    "gatsby-plugin-facebook-pixel": "^1.0.8",
    "gatsby-plugin-gatsby-cloud": "^5.0.0",
    "gatsby-plugin-google-tagmanager": "^5.0.0",
    "gatsby-plugin-image": "^3.0.0",
    "gatsby-plugin-manifest": "^5.0.0",
    "gatsby-plugin-offline": "^6.0.0",
    "gatsby-plugin-postcss": "^6.0.0",
    "gatsby-plugin-purgecss": "^6.1.2",
    "gatsby-plugin-react-helmet": "^6.0.0",
    "gatsby-plugin-react-leaflet": "^3.0.3",
    "gatsby-plugin-sass": "^6.0.0",
    "gatsby-plugin-sharp": "^5.0.0",
    "gatsby-source-filesystem": "^5.0.0",
    "gatsby-source-wordpress": "^7.0.0",
    "gatsby-transformer-sharp": "^5.0.0",
    "jotai": "^1.9.2",
    "leaflet": "^1.9.2",
    "leaflet.locatecontrol": "^0.78.0",
    "postcss": "^8.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.39.3",
    "react-icons": "^4.6.0",
    "react-images": "^1.2.0-beta.7",
    "react-leaflet": "^3.0.3",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-photo-gallery": "^8.0.0",
    "react-share": "^4.4.1",
    "sass": "^1.56.1",
    "swiper": "^8.4.4"
  },

This is my Wordpress plugin configuration:

    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: process.env.WORDPRESS_URL,
        type: {
          BlockEditorContentNode: {exclude: true},
            MediaItem: {
              createFileNodes: false,
            },
          },
        develop: {
          hardCacheMediaFiles: true,
          hardCacheData: true,
        },
        production: {
          allow404Images: true,
          allow401Images: true,
        },
        debug: {
          preview: true,
          timeBuildSteps: true,
          graphql: {
           showQueryVarsOnError: true,
           showQueryOnError: true,
           writeQueriesToDisk: true
          }
         },
        schema: {
          perPage: 50, // currently set to 100
          requestConcurrency: 10, // currently set to 15
          previewRequestConcurrency: 10, // currently set to 5
          timeout: 50000,
        }
      },
    },

Reproduction Link

nothinghere

Steps to Reproduce

I clean cache, remove package-lock.json and node_modules
I reinstall npm packages
I run gatsby develop ...

Expected Result

I expect the development to run like before, but I face the unable to fetch image problem.

Actual Result

I face unable to fetch image problem.

Environment

System:
    OS: Mac OS Ventura
    CPU: M1
Binaries:
    Node: 18
    NPM: 9
Languages:
    Javascript
Borwsers:
    Chrome

Config Flags

No

chriszack3 commented 2 years ago

Do you have both a .env.development && .env.production files in the root of your project?

shalawfatah commented 2 years ago

Do you have both a .env.development && .env.production files in the root of your project?

Yes, this is .env.development

WORDPRESS_URL=http://guidedby2.local/graphql

chriszack3 commented 2 years ago

So you're getting an error from port 443 when it tries to connect, which is the TCP port SSL uses. It looks to me like the problem is that wordpress is expecting an HTTPS connection and you are trying to connect with HTTP. Let me know if fixing that solves the problem

LekoArts commented 2 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

LekoArts commented 1 year ago

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

gatsbyjs / gatsby