Fix GraphQL proxy in dev environments without IPv6

[chousheng]

This PR fixes the problem that the GraphQL dev proxy fails (EADDRNOTAVAIL) when the IPv6 loopback interface is unavailable.

Why

I was following the tutorial (in Chapter 2 - Getting Dynamic) but got the proxy error below when accessing the scaffolded /posts route:

web | <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:8910/graphql to http://[::1]:8911/ [EADDRNOTAVAIL] (https://nodejs.org/api/errors.html#errors_common_system_errors)

So I dived into it and found the problem was that the dev proxy tried to connect to the GraphQL server via IPv6 ::1 (see code here) and my dev environment did not have the IPv6 loopback interface enabled:

$ ip -6 a
$ # shows nothing

However, I could not enable IPv6 because I was using a VS Code Dev Container with Docker Desktop on macOS, where IPv6 had not been supported yet (see docker/for-mac#1432).

Here are some related problem reports:

• https://community.redwoodjs.com/t/using-dev-container-with-redwood/1823/6 (EADDRNOTAVAIL)
• https://community.redwoodjs.com/t/using-dev-container-with-redwood/1823/11 (EADDRNOTAVAIL)
• https://community.redwoodjs.com/t/tutorial-issue-error-occurred-while-proxying-request-localhost-8910-graphql-to-http-1-8911/2976 (EADDRNOTAVAIL)
• https://discord.com/channels/679514959968993311/716252919875240007/889768997346742292 (EADDRNOTAVAIL)
• https://news.ycombinator.com/item?id=30912175 (EADDRNOTAVAIL)
• https://stackoverflow.com/questions/71941663/how-can-i-solve-error-occurred-while-proxying-request-redwoodjs (ENETUNREACH)

Changes

Looking at the history, I found that PR #940 fixed an intermittent connection failure problem (ECONNRESET) but introduced this new problem (EADDRNOTAVAIL).

PR #940 had two changes:

1. Add Connection: keep-live to the HTTP request header sending to the GraphQL server behind the proxy
2. Change the target host from localhost (auto IPv4 or IPv6) to ::1 (IPv6 only).

Searching around, I believe the first change alone fixed the ECONNRESET problem, as reported here and here. That is, to avoid the new EADDRNOTAVAIL problem, we can safely revert the second change to use localhost (which can automatically resolve to either IPv4 or IPv6 loopback address depending on the environment). So, I revert the second change in this PR.

Besides, as a side effect, we no longer need to set RWJS_DEV_API_URL env var in Gitpod anymore. So, I remove the RWJS_DEV_API_URL settings in the GitPod config in this PR.

Testing

I have manually tested this PR using the rw-test-app (created by running yarn run build:test-project) in the environments below:

• Gitpod
• Dev Container with VS Code and Docker Desktop on macOS
• Native macOS without containers

I would like to let CI test the rest.

---

Thanks the core team for making a welcoming community. This is my first PR to Redwood (also the first PR to the open-source world). I would appreciate any feedback!

[replay-io]

18 replays were recorded for 7390490.

0 Failed

18 Passed

• useAuth hook, auth redirects checks
• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that rehydration works for page not wrapped in Set
• Check that rehydration works for page with Cell in Set
• Check that rehydration works for page with code split chunks
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user
• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[thedavidprice]

Hi @chousheng Welcome to Redwood! For a first PR, you definitely took on a challenge. Well done. And huge thank you for the amount of QA testing — very helpful.

This PR only includes code changes for Webpack and GitPod. It's likely you didn't add additional files/commits or didn't push them to GitHub. Could you please double-check?

@jtoar we'll need to sync up and spend some time on this one.

[chousheng]

Thank you @thedavidprice for the reminder! I just double-checked the files. That's all I changed. Actually, the major code change was a one-liner in the webpack config packages/core/config/webpack.development.js.

[dthyresson]

@chousheng and @thedavidprice I recall this setting be changed once or twice before from localhost to :: etc. see #3434

I’m not sure my at this change without maybe some logic or detection is sufficient.

[chousheng]

Hi @dthyresson, thanks for the comment.

I looked at PR #3434 as well. PR #3434, like this PR, ended up changing the default setting in Gitpod from ::1 to localhost (by adding a new env var RWJS_DEV_API_URL and setting it to http://localhost in .gitpod.yml). So I believe using localhost should be sound.

Besides, we are currently using :: as the listening address in the fastify GraphQL server (code here). Using :: means listening on all IPv6 and all IPv4 addresses on all major OSes (see here and here). So if we use localhost, we do not have to worry about localhost resolving to IPv4 127.0.0.1 or IPv6 ::1. Both cases work. But if we use ::1, we cannot support environments lacking IPv6.

[Tobbe]

Related: #8019
(I remove the host config to use the default, which is localhost)

[jtoar]

@Tobbe talking with @thedavidprice, if you feel like you understand the setup enough to make decisions could you take lead on this and also get in your Fastify PR? If not I'm happy to pair

[Tobbe]

Thanks for your PR @chousheng! Great work 🙂

[chousheng]

@Tobbe, thank you!