From 4f3106348352cd194b452230e60b58f433c091ae Mon Sep 17 00:00:00 2001 From: Benjie Gillam Date: Wed, 15 May 2024 14:06:20 +0100 Subject: [PATCH 1/2] Clarify Ruru's relation to GraphiQL --- .../running-an-express-graphql-server.mdx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/pages/graphql-js/running-an-express-graphql-server.mdx b/src/pages/graphql-js/running-an-express-graphql-server.mdx index 0b3c7a28e5..327afb7669 100644 --- a/src/pages/graphql-js/running-an-express-graphql-server.mdx +++ b/src/pages/graphql-js/running-an-express-graphql-server.mdx @@ -6,7 +6,7 @@ sidebarTitle: Running Express + GraphQL 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 graphql-http graphql ruru --save +npm install express graphql-http graphql --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 `graphql-http` library to mount a GraphQL API server on the “/graphql” HTTP endpoint: @@ -15,7 +15,6 @@ Let's modify our “hello world” example so that it's an API server rather tha var express = require("express") 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(` @@ -42,12 +41,6 @@ app.all( }) ) -// 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") @@ -59,6 +52,23 @@ You can run this GraphQL server with: node server.js ``` -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. +## Using GraphiQL + +[Graph_i_QL](https://github.com/graphql/graphiql) is GraphQL's IDE; a great way of querying and exploring your GraphQL API. +One easy way to add it to your server is via the MIT-licensed [ruru](https://github.com/graphile/crystal/blob/main/grafast/ruru/README.md) package which bundles a prebuilt Graph_i_QL with some popular enhancements. +To do so, install the `ruru` module with `npm install --save ruru` and then add the following to your `server.js` file, then restart the `node server.js` command: + +```js +var { ruruHTML } = require("ruru/server") + +// Serve the GraphiQL IDE. +app.get("/", (_req, res) => { + res.type("html") + res.end(ruruHTML({ endpoint: "/graphql" })) +}) +``` + +If you navigate to [http://localhost:4000](http://localhost:4000), you should see an interface that lets you enter queries; +now you can use the Graph_i_QL IDE tool to issue GraphQL queries directly in the browser. 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/). From df65797962d250a31d9b20c1455e2db0c5e3c467 Mon Sep 17 00:00:00 2001 From: Benjie Gillam Date: Wed, 15 May 2024 14:51:39 +0100 Subject: [PATCH 2/2] Vercel fails to render italic 'i' --- src/pages/graphql-js/running-an-express-graphql-server.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/graphql-js/running-an-express-graphql-server.mdx b/src/pages/graphql-js/running-an-express-graphql-server.mdx index 327afb7669..c73b403198 100644 --- a/src/pages/graphql-js/running-an-express-graphql-server.mdx +++ b/src/pages/graphql-js/running-an-express-graphql-server.mdx @@ -54,8 +54,8 @@ node server.js ## Using GraphiQL -[Graph_i_QL](https://github.com/graphql/graphiql) is GraphQL's IDE; a great way of querying and exploring your GraphQL API. -One easy way to add it to your server is via the MIT-licensed [ruru](https://github.com/graphile/crystal/blob/main/grafast/ruru/README.md) package which bundles a prebuilt Graph_i_QL with some popular enhancements. +[GraphiQL](https://github.com/graphql/graphiql) is GraphQL's IDE; a great way of querying and exploring your GraphQL API. +One easy way to add it to your server is via the MIT-licensed [ruru](https://github.com/graphile/crystal/blob/main/grafast/ruru/README.md) package which bundles a prebuilt GraphiQL with some popular enhancements. To do so, install the `ruru` module with `npm install --save ruru` and then add the following to your `server.js` file, then restart the `node server.js` command: ```js @@ -69,6 +69,6 @@ app.get("/", (_req, res) => { ``` If you navigate to [http://localhost:4000](http://localhost:4000), you should see an interface that lets you enter queries; -now you can use the Graph_i_QL IDE tool to issue GraphQL queries directly in the browser. +now you can use the GraphiQL IDE tool to issue GraphQL queries directly in the browser. 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/).