fix: Webpack dev server config before and after middleware and renderExample path

[mylesmmurphy]

Current Behavior:
Upon a fresh pull and install of the project and following the dev setup instructions for GraphiQL only, you will receive the following error when trying to run yarn run start-graphiql:

$ yarn workspace graphiql dev
$ cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'after'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 2

Webpack deprecated v4's devServer.before in v5.

After resolving that error, the graphiql interface does not load when opening http://localhost:8080/ or http://localhost:8080/dev.html, and instead hangs on the "Loading..." screen, with the error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Desired Behavior:
start-graphiql should start a webpack development server with the correct middlewares and no errors. You should be able to navigate to graphiql ui via http://localhost:8080/dev.html

Solution:
Following webpack dev server's documentation for setting up middlewares, we should use the setupMiddlewares in place of before and after.

Added /resources to renderExamples.js path in Express.

Notes:
We could use onBeforeSetupMiddleware and onAfterSetupMiddleware instead of the newer setupMiddlewares, which behaves closer to the original behavior than what is in this PR, but that has a deprecation warning.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2cf13ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: mylesmmurphy / name: Myles Murphy (5d91596, 4e711d5, 3c60218)

[acao]

@mylesmmurphy hey there! thanks for this! we are in the midst of overhauling build tooling and it looks like this example was broken

[acao]

Hmm, seems to cause the exact same error I get when I make this change - something about it breaks the cypress build

[thomasheyenbrock]

Thanks @mylesmmurphy 🙌 the main workflow for developing GraphiQL is indeed broken at the moment. Just a nit.

[mylesmmurphy]

@acao Good catch, my apologies, I forgot to check that. I reworked this PR slightly and everything appears to be working correctly now :)

[acao]

It looks like you're getting the same failure on netlify deploy previews that other PRs are getting now. I think this has to do with a non-pinned resolution. Hope we can get this fixed!

[acao]

lets get netlify deploy preview builds working before merging, the current failure is the same across all PRs

[acao]

also to note - here the webpack NODE_ENV=development build is working for the cypress suite, but the NODE_ENV=production build we do for netlify is what is failing.

[acao]

I found the source of the netlify issue, this is good to merge as is! thanks for the fix.