Build a full stack Express GraphQL API with GraphQL Designer in a few minutes.

6 min readJan 12, 2019

This article is about building an express graphQL API with GraphQL Designer. And this is especially for beginners who want to build an express graphQL API without any coding.

If you are interested to learn about graphQL, I would suggest you to learn at HowToGraphQL.com.

What is GraphQL designer?
According to GraphQL designer’s github page,

GraphQL Designer is a prototyping tool to develop full-stack GraphQL applications. With a few simple inputs, GraphQL Designer auto generates code for download, to start and implement your new application including GraphQL root queries, schemas, mutations, and client queries. Also available for download are the NoSQL schemas or SQL build scripts, and a server file.

From my understanding, GraphQL Designer is a tool to build an express graphQL API in a very short time.
And It has these amazing features

— GD provides 3 different database options ( MongoDB, MySQL, PostgreSQL)

— GD generates GraphQL Types, Root Queries, Mutations and Resolvers out of the box. Not only for the server side schemas, GD also generates client React graphql Queries and Mutations.

— GD is built on top of express and express-graphql.

— You don’t have to write any line of codes. ( MAGIC! 😀)

— GD is open source and available to download on Github.

— Export GraphQL API source codes in a single click.

Before we start playing with GD, let’s take a look to our data structure for the API first.

This diagram shows User and Post table with their fields. (Here, we are not going to build a complex data structures because this is just for a tutorial.)

The database has two tables “User and Post”. And there will be a relational field called “Author” to link between them.

Ok let’s get started with GraphQL designer on http://graphqldesigner.com.

1. Choose database option.

When you first open the GD home page, you will see a popup to choose the database options. You can choose any database that you want. (For this tutorial, I am going to choose MongoDB)

2. Create tables

According to our data structure, we have to create two tables (“User” and “Post”) in the right panel. (Make sure the Table name is singular)

3. Create table fields

After you created two tables, let’s click on “ADD FIELD” to add more fields.

(As ID is a default field, we don’t have to worry for it).

Let’s create three different fields (username, email, password) for User table.

username | String | unique | required
email | String | unique | required
password | String | required

We can specify field types and make them unique or required by switching the toggles under the field names.

Again, let’s create four different fields (title, description, tags, author) for Post table.

title | String | required
description | String
tags | String
author | ID (many to one relation with User)

4. Add a relational field.

Let’s make a relationship between Post and User table, we have to create a new field name “Author” with “Many to one” reference type. ( Here, many to one is like- there will be many posts and each post will has a single user(author)).

(If you want to know more about many to one and one to many relationships, you can read here.)

5. Export graphQL schemas and codes.

Here, if you have the existing node app, you can copy the schemas from a CODE tab and add into your app. But I will go with the entire generated app.

We can click on EXPORT CODE to export GraphQL schemas and codes.
It will download a zip file named “graphql”.

Before we start our API server, we have to edit a single file and install required nodejs dependencies.

Extract the downloaded file and enter into that folder from your Terminal.

cd Downloads/graphql

Then, install the dependencies.

npm install

After the installation is finished, let’s edit index.js which is inside the server folder. On line 18, set the “graphiql” value to true as the below screenshot.

6. Link to MongoDB

In the same file, you will see a MongoDB url.

Initially, the default MongoDB url will link to localhost,
If you prefer using localhost you can use it,
But If you want to use online Mongo database, you can use MLab.com which provides a free plan for 500MB.

Note: Instead of pasting MongoDB url directly inside index.js, I would recommend using dotenv (.env) file for a better security.

And run the below command to start the server.

npm run start

The server will be running on port 4000.

7. Add data to MongoDB

Before we do something, we need to add the data first because our newly created mongoDB is still a blank.

So, let’s open

http://localhost:4000/graphql

You will see a GraphQL playground called Graphiql, which is an in-browser IDE for graphQL queries.

let’s add a new user from graqhiql IDE,
type the below graphql mutation inside the left box and press play button. It will add a new user into the database.

mutation{
  addUser(
   username:"John Doe",
   email:"john@doe.com",
   password:"123456"
){
    id
    username
    email
   }
}

Important: This is a demo app and I don’t hash the password. If you are building a real world app for production, you must hash the password with “bcrypt” before you store in your database, otherwise anyone can see the user’s passwords.(And this article won’t cover about Graphql Authentication)

And let’s add a new post with the below mutation.

mutation{
  addPost(
   title:"My first post",
   description:"This is the description of my first post",
   tags:"Hello,world"
){
    id
    title
    description
   }
}

Again, let’s add one more post.

mutation{
  addPost(
   title:"My second post",
   description:"This is the description of my second post",
   tags:"second,Hello,world"
){
    id
    title
    description
   }
}

So now we have one user and two posts in our database.

8. Query the data from API

let’s query our data by using the below queries.

Get all posts with related Author

Here is a trick, although we have added “author” (as a relational field), we have to query as “relatedUser”.

{
  everyPost{
    title
    description
    relatedUser{
      id
      username
      email
    }
  }
}

The above query will return all posts with a related user ( Author )

Get a single post

{
  post(id:"5c3757f6c127c934b7198685"){
    title
    description
    tags
  }
}

This will return a single user.

And we can do all CRUD stuffs with our API, GraphQL Designer automatically generated all queries and mutations for us.

And also we don’t have to remember any single query or mutation.

Every GraphQL IDE has a very convenience documentation in the right panel. You can just click on Docs in the right corner of IDE, and see all the queries and mutations.