Getting Started with GraphQL: It’s pretty easy!

(yes)Just hit enter to skip through the initialization process.

You can go back and edit your package.

json later if you want.

Next, let’s install Express, GraphQL, and Express-GraphQL library:$ npm install express express-graphql graphqlnpm notice created a lockfile as package-lock.


You should commit this file.

npm WARN graphql-medium@1.


0 No descriptionnpm WARN graphql-medium@1.


0 No repository field.

+ express-graphql@0.


0+ graphql@14.


1+ express@4.


0added 53 packages from 38 contributors and audited 151 packages in 6.

169sfound 0 vulnerabilitiesNow, we’ll create a new file called index.

js and create a new barebones Express server there:// index.

jsconst express = require('express');const app = express();app.

get('/', function(req, res) { res.

send('Express is working!')});app.

listen(4000, function() { console.

log('Listening on port 4000')});Try running npm index.


You should see a message “Listening on port 4000” and if you visit http://localhost:4000/ then you’ll see “Express is working!”2.

Add in GraphQL & Define SchemaWe already installed the GraphQL npm package.

Now, let’s use it.

First, we need to import the necessary building blocks:const graphqlHTTP = require('express-graphql');const { buildSchema } = require('graphql');Next, we’ll use those building blocks.

Let’s start by defining the schema of our GraphQL API.

What should an incoming query look like?For now, let’s just define a hello world schema to get things working:let schema = buildSchema(` type Query { hello: String }`);This simple schema lets GraphQL know that when someone sends a query for “hello”, we’re going to end up returning a string.

Notice those little backticks (`) in there.

Those indicate we’re using a JavaScript template literal.

Basically, we use those backticks to tell JavaScript that we’re about to write in a different language — the GraphQL query language.


Resolving queriesSo, when someone submits a query for hello we know we’re going to end up returning a string.

That’s defined in our schema.

Now, we need to tell GraphQL exactly what string it should return.

Figuring out what data to return based on an incoming query is the job of a “resolver” in GraphQL.

In this example, the resolver is simple.

We’re literally going to return the string “Hello world”return 'Hello world!';However, we need to wrap that return statement inside a function that can get called multiple times, any time someone makes a query for hello:function() { return 'Hello world!';}Now, hello might not be the only query type we implement.

In the future, we might also include “endpoints” for other functionality.

So, we should make sure this function we just created is mapped to hello and saved in an object alongside all the other resolvers for our API.

let root = { hello: function() { return 'Hello world!'; },}It’s convention to call the object that hold all the resolvers root, but you can call it whatever you want.


Setting up an endpointAstute readers will notice that we imported graphqlHTTP in step 2 but we haven’t used it yet.

Now is the time.

We’ve now got everything in place for our GraphQL server.

We just need to make it available via a URL endpoint.

In Express, we’ll create a new route to serve up the GraphQL api:app.

use('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true,}));Schema and root point to the variables we defined in steps 2 & 3.

graphiql is a useful visual tool that installs along with GraphQL.

As we’ll see in a second, it makes it easy to test out how your API is working.

Here’s the final state of our source code for our GraphQL server.


Run it & write a queryWe’re ready to test it out!Start the app with npm index.

jsGo to http://localhost:4000/graphqlYou should see the graphiql interface:We can now use this interface to make sure our API is working!Let’s write a query.

This one is going to be super simple.

We always wrap our GraphQL queries in curly braces.

Then, we specify the schema object we’re querying followed by any attributes we want to fetch.

In this case, there’s only one thing in our API to fetch so far:{ hello}If you click the submit button, you’ll see:{ "data": { "hello": "Hello world!" }}It’s working!Adding more endpointsAdding endpoints to your API is as simple as defining new fields in your schema and then adding a resolver function to rootYou can gradually get more complex with your queries as well.

I recommend this guide on building a dice rolling API from the official docs as your next step.

GraphQL, FTWGraphQL is awesome and growing rapidly in adoption.

It has the potential to become a ubiquitous technology for APIs over the coming years.

Hopefully this guide gave you a good introduction to how and why you can use GraphQL in your projects.

Share your thoughts in the comments below!.I read every reply.

About BennettI’m a software developer in New York City.

I do web stuff in Python and JavaScript.

Like what you’ve read here?.I have an email list you can subscribe to.

Infrequent emails, only valuable content, no time wasters.

I’d love to have you there.


. More details

Leave a Reply