Recommend graphql-http instead of deprecated express-graphql (#1616)

* graphql-http

* Update src/content/graphql-js/APIReference-GraphQLHTTP.md

Co-authored-by: Benjie <[email protected]>

* Update src/content/graphql-js/Guides-ConstructingTypes.md

Co-authored-by: Benjie <[email protected]>

* more explain

* ruru it is

* unused img

---------

Co-authored-by: Benjie <[email protected]>

Author: enisdenjo

notes/ContributingToCodePage.md

@@ -39,21 +39,21 @@ Here's an optimal example of what we're looking for:
 name: Express GraphQL
 description: The reference implementation of a GraphQL API server over an Express webserver. You can use this to run GraphQL in conjunction with a regular Express webserver, or as a standalone GraphQL server.
 url: /graphql-js/running-an-express-graphql-server/
-github: graphql/express-graphql
-npm: "express-graphql"
+github: graphql/graphql-http
+npm: "graphql-http"
 ---
 
-To run an `express-graphql` hello world server:
+To run an `graphql-http` hello world server:
 
 ```bash
-npm install express express-graphql graphql
+npm install express graphql-http graphql
 ```
 
 Then run `node server.js` with this code in `server.js`:
 
 ```js
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
 
 var schema = buildSchema(`
@@ -65,12 +65,11 @@ var schema = buildSchema(`
 var root = { hello: () => "Hello world!" }
 
 var app = express()
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
-    graphiql: true,
   })
 )
 app.listen(4000, () => console.log("Now browse to localhost:4000/graphql"))

src/content/faq/Specification.md

@@ -15,7 +15,7 @@ The entire process behind each release is open source. You can monitor specifica
 
 GraphQL is still evolving and contributions are very welcome! The specification (including the [latest working draft](https://spec.graphql.org/)) is open source. [Contributor guidelines](https://github.com/graphql/graphql-spec/blob/main/CONTRIBUTING.md) are available on GitHub.
 
-There are more ways to get involved with GraphQL beyond the specification though. Updating the content on [this website and the documentation](https://github.com/graphql/graphql.github.io), for example. Or contributing to [graphql-js](https://github.com/graphql/graphql-js), [express-graphql](https://github.com/graphql/express-graphql), [GraphiQL](https://github.com/graphql/graphiql), or [one of the many other projects](https://github.com/graphql/) maintained by the [GraphQL Foundation](#what-is-the-graphql-foundation).
+There are more ways to get involved with GraphQL beyond the specification though. Updating the content on [this website and the documentation](https://github.com/graphql/graphql.github.io), for example. Or contributing to [graphql-js](https://github.com/graphql/graphql-js), [graphql-http](https://github.com/graphql/graphql-http), [GraphiQL](https://github.com/graphql/graphiql), or [one of the many other projects](https://github.com/graphql/) maintained by the [GraphQL Foundation](#what-is-the-graphql-foundation).
 
 ### What is GraphQL Specification membership?
 

src/content/graphql-js/APIReference-ExpressGraphQL.md

@@ -0,0 +1,35 @@
+---
+title: graphql-http
+layout: docs
+category: API Reference
+permalink: /graphql-js/graphql-http/
+sublinks: createHandler
+next: /graphql-js/graphql/
+---
+
+The [official `graphql-http` package](https://github.com/graphql/graphql-http) provides a simple way to create a fully compliant GraphQL server. It has a handler for Node.js native [`http`](https://nodejs.org/api/http.html), together with handlers for well-known frameworks like [Express](https://expressjs.com/), [Fastify](https://www.fastify.io/) and [Koa](https://koajs.com/); as well as handlers for different runtimes like [Deno](https://deno.land/) and [Bun](https://bun.sh/).
+
+## Express
+
+```js
+import { createHandler } from "graphql-http/lib/use/express" // ES6
+const { createHandler } = require("graphql-http/lib/use/express") // CommonJS
+```
+
+### createHandler
+
+```js
+createHandler({
+  schema: GraphQLSchema,
+  rootValue?: ?any,
+  context?: ?any,
+  formatError?: ?Function,
+  validationRules?: ?Array<any>,
+}): Handler
+```
+
+Constructs an Express handler based on a GraphQL schema.
+
+See the [tutorial](/graphql-js/running-an-express-graphql-server/) for sample usage.
+
+See the [GitHub README](https://github.com/graphql/graphql-http) for more extensive documentation, including how to use `graphql-http` with other server frameworks and runtimes.

src/content/graphql-js/APIReference-GraphQLHTTP.md

@@ -3,7 +3,7 @@ title: Constructing Types
 layout: docs
 category: Advanced Guides
 permalink: /graphql-js/constructing-types/
-next: /graphql-js/express-graphql/
+next: /graphql-js/graphql-http/
 ---
 
 For many apps, you can define a fixed schema when the application starts, and define it using GraphQL schema language. In some cases, it's useful to construct a schema programmatically. You can do this using the `GraphQLSchema` constructor.
@@ -14,7 +14,7 @@ For example, let's say we are building a simple API that lets you fetch user dat
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
 
 var schema = buildSchema(`
@@ -47,12 +47,11 @@ var root = {
 }
 
 var app = express()
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
-    graphiql: true,
   })
 )
 app.listen(4000)
@@ -63,7 +62,7 @@ We can implement this same API without using GraphQL schema language:
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var graphql = require("graphql")
 
 // Maps id to User object
@@ -107,11 +106,10 @@ var queryType = new graphql.GraphQLObjectType({
 var schema = new graphql.GraphQLSchema({ query: queryType })
 
 var app = express()
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
-    graphiql: true,
   })
 )
 app.listen(4000)

src/content/graphql-js/Guides-ConstructingTypes.md

@@ -7,15 +7,15 @@ permalink: /graphql-js/authentication-and-express-middleware/
 next: /graphql-js/constructing-types/
 ---
 
-It's simple to use any Express middleware in conjunction with `express-graphql`. In particular, this is a great pattern for handling authentication.
+It's simple to use any Express middleware in conjunction with `graphql-http`. In particular, this is a great pattern for handling authentication.
 
 To use middleware with a GraphQL resolver, just use the middleware like you would with a normal Express app. The `request` object is then available as the second argument in any resolver.
 
 For example, let's say we wanted our server to log the IP address of every request, and we also want to write an API that returns the IP address of the caller. We can do the former with middleware, and the latter by accessing the `request` object in a resolver. Here's server code that implements this:
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
 
 var schema = buildSchema(`
@@ -37,9 +37,9 @@ var root = {
 
 var app = express()
 app.use(loggingMiddleware)
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
     graphiql: true,
@@ -49,7 +49,7 @@ app.listen(4000)
 console.log("Running a GraphQL API server at localhost:4000/graphql")
 ```
 
-In a REST API, authentication is often handled with a header, that contains an auth token which proves what user is making this request. Express middleware processes these headers and puts authentication data on the Express `request` object. Some middleware modules that handle authentication like this are [Passport](http://passportjs.org/), [express-jwt](https://github.com/auth0/express-jwt), and [express-session](https://github.com/expressjs/session). Each of these modules works with `express-graphql`.
+In a REST API, authentication is often handled with a header, that contains an auth token which proves what user is making this request. Express middleware processes these headers and puts authentication data on the Express `request` object. Some middleware modules that handle authentication like this are [Passport](http://passportjs.org/), [express-jwt](https://github.com/auth0/express-jwt), and [express-session](https://github.com/expressjs/session). Each of these modules works with `graphql-http`.
 
 If you aren't familiar with any of these authentication mechanisms, we recommend using `express-jwt` because it's simple without sacrificing any future flexibility.
 

src/content/graphql-js/Tutorial-Authentication.md

@@ -18,7 +18,7 @@ Each of these types maps straightforwardly to JavaScript, so you can just return
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
 
 // Construct a schema, using GraphQL schema language
@@ -44,12 +44,11 @@ var root = {
 }
 
 var app = express()
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
-    graphiql: true,
   })
 )
 app.listen(4000)

src/content/graphql-js/Tutorial-BasicTypes.md

@@ -10,15 +10,16 @@ next: /graphql-js/graphql-clients/
 The simplest way to run a GraphQL API server is to use [Express](https://expressjs.com), a popular web application framework for Node.js. You will need to install two additional dependencies:
 
 ```bash
-npm install express express-graphql graphql --save
+npm install express graphql-http graphql ruru --save
 ```
 
-Let's modify our “hello world” example so that it's an API server rather than a script that runs a single query. We can use the 'express' module to run a webserver, and instead of executing a query directly with the `graphql` function, we can use the `express-graphql` library to mount a GraphQL API server on the “/graphql” HTTP endpoint:
+Let's modify our “hello world” example so that it's an API server rather than a script that runs a single query. We can use the 'express' module to run a webserver, and instead of executing a query directly with the `graphql` function, we can use the `graphql-http` library to mount a GraphQL API server on the “/graphql” HTTP endpoint:
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
+var { ruruHTML } = require("ruru/server")
 
 // Construct a schema, using GraphQL schema language
 var schema = buildSchema(`
@@ -35,14 +36,23 @@ var root = {
 }
 
 var app = express()
-app.use(
+
+// Create and use the GraphQL handler.
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
-    graphiql: true,
   })
 )
+
+// Serve the GraphiQL IDE.
+app.get("/", (_req, res) => {
+  res.type("html")
+  res.end(ruruHTML({ endpoint: "/graphql" }))
+})
+
+// Start the server at port
 app.listen(4000)
 console.log("Running a GraphQL API server at http://localhost:4000/graphql")
 ```
@@ -53,10 +63,6 @@ You can run this GraphQL server with:
 node server.js
 ```
 
-Since we configured `graphqlHTTP` with `graphiql: true`, you can use the GraphiQL tool to manually issue GraphQL queries. If you navigate in a web browser to [http://localhost:4000/graphql](http://localhost:4000/graphql), you should see an interface that lets you enter queries. It should look like:
-
-![hello world graphql example](/img/hello.png)
-
-This screen shot shows the GraphQL query `{ hello }` being issued and giving a result of `{ data: { hello: 'Hello world!' } }`. GraphiQL is a great tool for debugging and inspecting a server, so we recommend running it whenever your application is in development mode.
+You can use the Graph_i_QL IDE tool to issue GraphQL queries directly in the browser. If you navigate to [http://localhost:4000](http://localhost:4000), you should see an interface that lets you enter queries.
 
-At this point you have learned how to run a GraphQL server and how to use GraphiQL interface to issue queries. The next step is to learn how to [issue GraphQL queries from client code](/graphql-js/graphql-clients/).
+At this point you have learned how to run a GraphQL server. The next step is to learn how to [issue GraphQL queries from client code](/graphql-js/graphql-clients/).

src/content/graphql-js/Tutorial-ExpressGraphQL.md

@@ -6,7 +6,7 @@ permalink: /graphql-js/graphql-clients/
 next: /graphql-js/basic-types/
 ---
 
-Since a GraphQL API has more underlying structure than a REST API, there are more powerful clients like [Relay](https://facebook.github.io/relay/) which can automatically handle batching, caching, and other features. But you don't need a complex client to call a GraphQL server. With `express-graphql`, you can just send an HTTP POST request to the endpoint you mounted your GraphQL server on, passing the GraphQL query as the `query` field in a JSON payload.
+Since a GraphQL API has more underlying structure than a REST API, there are more powerful clients like [Relay](https://facebook.github.io/relay/) which can automatically handle batching, caching, and other features. But you don't need a complex client to call a GraphQL server. With `graphql-http`, you can just send an HTTP POST request to the endpoint you mounted your GraphQL server on, passing the GraphQL query as the `query` field in a JSON payload.
 
 For example, let's say we mounted a GraphQL server on http://localhost:4000/graphql as in the example code for [running an Express GraphQL server](/graphql-js/running-an-express-graphql-server/), and we want to send the GraphQL query `{ hello }`. We can do this from the command line with `curl`. If you paste this into a terminal:
 

src/content/graphql-js/Tutorial-GraphQLClients.md

@@ -73,7 +73,7 @@ Here's some runnable code that implements this schema, keeping the data in memor
 
 ```javascript
 var express = require("express")
-var { graphqlHTTP } = require("express-graphql")
+var { createHandler } = require("graphql-http/lib/use/express")
 var { buildSchema } = require("graphql")
 
 // Construct a schema, using GraphQL schema language
@@ -136,12 +136,11 @@ var root = {
 }
 
 var app = express()
-app.use(
+app.all(
   "/graphql",
-  graphqlHTTP({
+  createHandler({
     schema: schema,
     rootValue: root,
-    graphiql: true,
   })
 )
 app.listen(4000, () => {