Creating a GraphQL API server and consuming in Angular 5 application.

In my previous post I have explained how to perform CRUD operation using Angular 5 with Bootstrap 4 without any server (API) interaction. In this post let’s see how to create a GraphQL API server and how it can be consumed in Angular 5 application.

GraphQL is a data query language developed by Facebook which provides a common APIs between client and the server for data fetching and manipulations. It handles all request over single URL endpoint. It’s an alternative to REST, faster application and improve developer experience.

Before creating a GraphQL API server, we need to understand some of the important terminology of GraphQL.

Type define the shape of the object which client expects and field is the fundamental unit of a type and can have values that are Strings, Integers, Booleans, Floats, IDs, or references to another type in the system, or even a custom scalar.

Query specify how clients are allowed to query and retrieve defined types.

Mutation is used to manipulate the data. It is used to Create, Update and Delete operations.

Schema connects everything together. It’s collection of Type, Query and Mutation.

Resolvers are a set of application specific functions that interact with underlying data stores according to the query and mutation operations described in the schema.

The followings are prerequisite for this project:

· Node.js

· Node package manager (NPM)

Make sure you have Node and NPM installed on your system by type the below command in a terminal/console window.

node  –v
npm  – v

Setting up the GraphQL API Server.

Create a directory as GraphQLServer and change it to current directory.

mkdir GraphQLServer
cd GraphQLServer

Create a package.json

npm init

This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them.

Install Express

npm install express --save

Then, install graphql, graphql-tools, express-graphql and cors.

npm install graphql graphql-tools express-graphql cors --save

Let’s create a new file schema.js where we will define the type, query and mutation.

Declare the custom Date scalar as it’s not a default scalar in GraphQL.

# declare custom scalars for date as GQDate
scalar GQDate

Define Registration type.

# registration typetype Registration {id: ID!firstName: StringlastName: Stringdob: GQDateemail: Stringpassword: Stringcountry: String}

Define query.

type Query {# Return a registration by idRegistration(id: ID!): Registration# Return all registrationsRegistrations(limit: Int): [Registration]}

Define mutation for create, update and delete registration.

type Mutation {# Create a registrationcreateRegistration (firstName: String,lastName: String, dob: GQDate, email: String, password: String, country: String): Registration# Update a registrationupdateRegistration (id: ID!, firstName: String,lastName: String, dob: GQDate, email: String, password: String, country: String): Registration# Delete a registrationdeleteRegistration(id: ID!): Registration}

The final schema.js file will be as below.

Let’s create a resolvers.js file where we will define the CRUD functionality based on query and mutation operation described in the schema.

Finally, Let’s create a server.js file where we will pass typeDefs and resolvers to make executable schema.

Run the GraphQL API server.

 npm start

Now the server is started and the application can be accessed on http://localhost:4200/graphql. Let’s query data on GraphiQL, we should get the result as below.

Consume GraphQL API in the client application.

Create a directory as AngularClient under parent directory and change it to current directory.

cd ..
mkdir AngularClient
cd AngularClient

Clone my previous post’s code repository into current directory. Check my previous post to learn more on Angular 5 with Bootstrap 4.

git clone https://github.com/bahurudeen/ng5bootstrap4.git .

Install the application.

npm install

Installing Angular CLI

npm install --save-dev @angular/cli@latest

Install Apollo client packages for angular.

npm install apollo-angular apollo-angular-link-http apollo-client apollo-cache-inmemory graphql-tag graphql --save

let’s create a graphql.module.ts file where we will create a connection to GraphQL API server.

Import GraphQLModule in app.module.ts

Replace the below code

<td>{{ registration.dob.day + '/' + registration.dob.month + '/' + registration.dob.year}}</td>

as below in registration.component.html

<td>{{ registration.dob | date:”dd/MM/yyyy”}}</td>

The updated registration.component.html.

Let’s implement the new, edit, delete and display of registrations by consuming GraphQL API in registration.component.ts.

The updated registration.component.ts.

Run the application. Before running, make sure GraphQL API server is running.

ng serve

Now the web server is started and the Registration application can be accessed on http://localhost:4200/registration as you see in the below screenshot.

You can find all the source code in the below repository.

If this post is useful, please help others by clapping your hands below — thanks!