From 561b4f46b708c11c50bc1954c2b77585f9e58ae5 Mon Sep 17 00:00:00 2001 From: Mark Stuart Date: Tue, 18 Aug 2026 14:35:19 -0700 Subject: [PATCH] fix: restore boot by updating Babel config and graphql-yoga v5 API Two bugs, both from dependency bumps that landed without code changes: 1. .babelrc set useBuiltIns/debug, removed in @babel/preset-env 8, so @babel/register threw at startup before any app code ran. 2. graphql-yoga was bumped to ^5, which removed the v1 GraphQLServer constructor the workshop used. Ported to createYoga/createSchema served by node:http. Verified: server boots, { hello } and { hello(name:) } both resolve, and the GraphiQL IDE loads at /graphql. README updated for the /graphql path and the Playground -> GraphiQL rename. --- .babelrc | 8 ++++---- README.md | 6 +++--- server.js | 21 +++++++++++++++------ 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/.babelrc b/.babelrc index d9fcd19..c4d39e7 100644 --- a/.babelrc +++ b/.babelrc @@ -3,10 +3,10 @@ [ "@babel/preset-env", { - "targets": { "node": "current" }, - "modules": "commonjs", - "useBuiltIns": "usage", - "debug": true + "targets": { + "node": "current" + }, + "modules": "commonjs" } ] ] diff --git a/README.md b/README.md index 621b23d..527c562 100644 --- a/README.md +++ b/README.md @@ -81,16 +81,16 @@ To get the app up and running (and really see if it worked), run: ``` $ npm start -$ open http://localhost:4000 +$ open http://localhost:4000/graphql ``` -`npm start` will start the API server. Your browser should open up automatically to `http://localhost:4000` (if it doesn't, just open that yourself) and you should be able to start messing around with the app. +`npm start` will start the API server. Your browser should open up automatically to `http://localhost:4000/graphql` (if it doesn't, just open that yourself) and you should be able to start messing around with the app. Here's what you should be looking at: screen shot 2018-05-09 at 23 12 38 -GraphQL Playground is a great tool for writing and testing out queries. GraphQL Playground has some docs to explore on the right panel and offers an auto-complete-as-you-type experience. This is what GraphQL is all about, the developer experience! :-) +GraphiQL is a great tool for writing and testing out queries. GraphiQL has some docs to explore on the right panel and offers an auto-complete-as-you-type experience. This is what GraphQL is all about, the developer experience! :-) [npm]: https://www.npmjs.com/ [node]: https://nodejs.org diff --git a/server.js b/server.js index 2792a0b..de151c4 100644 --- a/server.js +++ b/server.js @@ -1,9 +1,10 @@ // "graphql-yoga" is a pretty neat package 📦 for getting started w/ GraphQL quickly. -// It's built on top of apollo-server (or Express) w/ some nice defaults. -// It will include an IDE called GraphQL Playground for testing queries. -// To read more about it, see https://github.com/prisma/graphql-yoga +// It's a spec-compliant GraphQL server w/ some nice defaults. +// It includes an IDE called GraphiQL for testing queries. +// To read more about it, see https://the-guild.dev/graphql/yoga-server // ⚡ -const { GraphQLServer } = require('graphql-yoga'); +const { createYoga, createSchema } = require('graphql-yoga'); +const { createServer } = require('node:http'); // "typeDefs" is your GraphQL schema. // @@ -53,7 +54,15 @@ const resolvers = { // resolver functions. This gets interesting when you can fetch schemas // remotely, mutate them, and pass them off to your server. // Google "GraphQL schema stitching" if you're interested. -const server = new GraphQLServer({ typeDefs, resolvers }); +// +// `createSchema` combines the typeDefs and resolvers into an executable +// schema, and `createYoga` wraps it in a request handler. +const yoga = createYoga({ schema: createSchema({ typeDefs, resolvers }) }); + +// Yoga is just a plain Node request handler, so any HTTP server can serve it. +const server = createServer(yoga); // Hello world! -server.start(() => console.log('Server is running on localhost:4000')); +server.listen(4000, () => + console.log('Server is running on http://localhost:4000/graphql') +);