Creating a Basic GraphQL Server with Express

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.

The post Creating a Basic GraphQL Server with Express appeared first on The Web Dev.