We can create a simple GraphQL server with Express. To do this, we need the express-graphql
and graphql
packages.
In this article, we’ll look at how to create a simple GraphQL server with express and make a simple schema for it.
Create an Express GraphQL Server
First, we have to install the packages by running:
npm install express express-graphql graphql --save
Then we can create a server.js
file in our project directory and add the following code:
const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type Query {
hello: String
}
`);
const root = {
hello: () => {
return 'Hello world!';
},
};
const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(3000, () => console.log('server started'));
In the code above, we created our express
instance, which then we added the schema
to it, which we defined by writing:
const schema = buildSchema(`
type Query {
hello: String
}
`);
With this schema, we’re allowed to submit the hello
query to our GraphQL server.
Then we have our root
object, which is our resolver for resolving the hello
query:
const root = {
hello: () => {
return 'Hello world!';
},
};
We just return the 'Hello world!'
string to the user who queries our server.
The code graphiql: true
means that enabled the GraphiQL tool so that we can go to localhost:3000/graphql
to see the GraphiQL tool. This is where we can type in our query.
Note that we don’t need a special client to make requests to our client. We can make a POST request to the /graphql
endpoint without our GraphQL request payload to send the request to our server.
For example, if we use Postman by typing in our /graphql
endpoint and then pass in {“query”: “{ hello }”}
as the request payload string. In the header, we set Content/Type
to application/json
, then we get:
{
"data": {
"hello": "Hello world!"
}
}
as the response.
We can also make the request in JavaScript with the Fetch API as follows:
(async () => {
const response = await fetch(
"/graphql",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify({ query: "{ hello }" })
}
);
const data = await response.json();
console.log(data);
})();
Then we get:
{
"data": {
"hello": "Hello world!"
}
}
In many cases, we would need to accept arguments in our resolver and query.
To do this, we can write the following:
const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type Query {
rollDice(numSides: Int): Int
}
`);
const root = {
rollDice: (params) => {
const { numSides } = params;
return Math.ceil(Math.random() * numSides);
},
};
const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(3000, () => console.log('server started'));
In the code above, we have the root
object with the rollDice
resolver function which as the params
parameter to get the arguments that are passed into GraphQL request.
Then we return a random number from it and return it. The number will be returned within the response.
To make our rollDice
resolver accept the request, we included:
type Query {
rollDice(numSides: Int): Int
}
in our schema so that it’ll take in the numSides
argument.
If we go to the /graphq
page in our browser, and then type in:
{
rollDice(numSides: 10)
}
in the left pane, we’ll get a number between 0 and 10.
To make a GraphQL POST request that takes in arguments, we can write the following:
(async () => {
const numSides = 6;
const query = `query RollDice($numSides: Int) {
rollDice(numSides: $numSides)
}`;
const response = await fetch(
"/graphql",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify({
query,
variables: { numSides },
})
});
const data = await response.json();
console.log(data);
})();
In the code above, we have the query
, which is:
query RollDice($numSides: Int) {
rollDice(numSides: $numSides)
}
and variables
, which is:
variables: { numSides }
The JSON body that we sent with the request is:
{
"query": "query RollDice($numSides: Int) {
rollDice(numSides: $numSides)
}",
"variables": {
"numSides": 6
}
}
This is the same what we ran in the GraphiQL UI, but needed the query RollDice
to wrap our query so that we can pass in the numSides
variable.
Conclusion
We can easily create a GraphQL Server with Express by using the express-graphql
package.
After that, we have to create our resolver function and schema to let us accept GraphQL requests.
Resolvers can also accept variables. In there, we return the result, which will then be returned in the response to the user.
To test our API, we can use the GraphiQL GUI to enter queries and test them.
2 replies on “Creating a Basic GraphQL Server with Express”
Hi, love your posts. Do you have a github to have a look at the complete code?
Thanks for reading. The complete code is in the article. You can paste it into the basic boilerplate code provided in the docs and it should run.