Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions notes/ContributingToCodePage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
Expand All @@ -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"))
Expand Down
2 changes: 1 addition & 1 deletion src/content/faq/Specification.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?

Expand Down
35 changes: 0 additions & 35 deletions src/content/graphql-js/APIReference-ExpressGraphQL.md

This file was deleted.

35 changes: 35 additions & 0 deletions src/content/graphql-js/APIReference-GraphQLHTTP.md
Original file line number Diff line number Diff line change
@@ -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.
16 changes: 7 additions & 9 deletions src/content/graphql-js/Guides-ConstructingTypes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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(`
Expand Down Expand Up @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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)
Expand Down
10 changes: 5 additions & 5 deletions src/content/graphql-js/Tutorial-Authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
Expand All @@ -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,
Expand All @@ -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.

Expand Down
7 changes: 3 additions & 4 deletions src/content/graphql-js/Tutorial-BasicTypes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down
30 changes: 18 additions & 12 deletions src/content/graphql-js/Tutorial-ExpressGraphQL.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
Expand All @@ -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")
```
Expand All @@ -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/).
2 changes: 1 addition & 1 deletion src/content/graphql-js/Tutorial-GraphQLClients.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
7 changes: 3 additions & 4 deletions src/content/graphql-js/Tutorial-Mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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, () => {
Expand Down
7 changes: 3 additions & 4 deletions src/content/graphql-js/Tutorial-ObjectTypes.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Putting this all together, here is some sample code that runs a server with this

```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
Expand Down Expand Up @@ -117,12 +117,11 @@ var root = {
}

var app = express()
app.use(
app.all(
"/graphql",
graphqlHTTP({
createHandler({
schema: schema,
rootValue: root,
graphiql: true,
})
)
app.listen(4000)
Expand Down
7 changes: 3 additions & 4 deletions src/content/graphql-js/Tutorial-PassingArguments.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ The entire code for a server that hosts this `rollDice` API is:

```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
Expand All @@ -80,12 +80,11 @@ var root = {
}

var app = express()
app.use(
app.all(
"/graphql",
graphqlHTTP({
createHandler({
schema: schema,
rootValue: root,
graphiql: true,
})
)
app.listen(4000)
Expand Down
Loading