Skip to content

Clarify Ruru's relation to GraphiQL #1699

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.

Sign up for GitHub

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 2 commits into from
May 15, 2024
Merged

Clarify Ruru's relation to GraphiQL #1699

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f31063
Clarify Ruru's relation to GraphiQL
benjie May 15, 2024
df65797
Vercel fails to render italic 'i'
benjie May 15, 2024
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
28 changes: 19 additions & 9 deletions src/pages/graphql-js/running-an-express-graphql-server.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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(`
Expand All @@ -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")
Expand All @@ -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

[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
var { ruruHTML } = require("ruru/server")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why use var and not const?

Copy link
Member Author

@benjie benjie May 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's copied from your previous code; but I thought exactly the same thing. (I personally never use var and very rarely use let.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I prolly did the same, copied from the last code haha. We can make a follow-up PR changing all vars to consts where applicable.


// 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 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/).
Loading