Nowadays I’ve started learning GraphQL from a big brother’s inspiration. And trying to make a simple CRUD application using Apollo, GraphQL, NodeJs, Express, MongoDB, Angular5.
GraphQL is a data query language developed internally by Facebook in 2012 before being publicly released in 2015. It provides an alternative to REST and ad-hoc web service architectures. GraphQL allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server. It is a strongly typed runtime which allows clients to dictate what data is needed. This avoids both the problems of over-fetching as well as under-fetching of data.
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API. Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less. GraphQL queries always return predictable results. Apps using GraphQL are fast and stable because they control the data they get, not the server.
Learn more about from GraphQL official website — http://graphql.org/learn/
CRUD Details Example
Check out the Github Repo — https://github.com/tithi021/graphql-apollo-nodejs-mongodb-angular5
Server API — https://graphql-crud-server.herokuapp.com/graphql
Live Project View — https://graphql-crud.herokuapp.com/
Prerequisite
Before starting, Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
Install Node.js and npm if they are not already on your machine. Find the full instruction from NodeJs Official website https://nodejs.org/en/ and AngularJs official website https://angular.io/ .
Now let’s talk about the Github Repo, you will see two folders, one is for the client side that build by latest version of Angular 5 with Apollo GraphQL and another one is server side that build by NodeJs, Express, Mongoose, GraphQL.
Server Side
# Setup
Open a terminal window and clone the project cd into the project server directory and install dependent packages by running `npm install` and finally run the command `node server.js`. The server API will be up & running on localhost 4000 port. At browser window, open http://localhost:4000/graphqland you will see a CRUD example of a GraphQL API.
Screenshot
# Project Structure
server.js — This is the main file for running the server of backend. This file contains all the required modules, establish the mongoose connection and GraphQL connection.
https://gist.github.com/tithi021/cf795642da78c5a40a3d922c6b47374f
models/user.js — This file contains mongoose user schema model that represents set of informations for user record in database.
https://gist.github.com/tithi021/be4b668a1ca7f00c745a57737b590924
Config folder contains two files that config.js and mongoose.js. config.js file hold database record for development, production and mongoose.js file established mongodb connection.
Finally graphql folder contains most of the GraphQL’s logic.
GraphQL Types
We need to design GraphQL user schema to specify the types for API using GraphQL schema language. The GraphQL schema language supports the scalar types of String, Int, Float, Boolean, and ID. Almost all of the GraphQL types define will be object types. Object types have a name, but most importantly describe their fields.
Inside /graphql/types/user.js here’s an example of a user type that define GraphQL User Schema.
https://gist.github.com/tithi021/88dd694e46f33d4fc912756bcb0f3bfc
GraphQL Queries
People commonly call everything that hits your GraphQL API server a “query”. The GraphQL define a query operation in a very concise way. GraphQL query for specific fields on object and result will come exactly the same shape as request. So, GraphQL query always get back what you expect, and the server knows exactly what fields the client is asking for.
Inside graphql/queries/user.js file write a very simple GraphQl user query and mongoose query used inside to retrieve user list of data from mongodb database.
https://gist.github.com/tithi021/39db63f83bfe3fb7283cfcf691ad112a
Let’s see in the browser to query for the user data the result we get when we run it:
GraphQL Mutation
Unlike REST, which uses different HTTP verbs for Creating, Updating, Deleting resources, GraphQL treats all operations with side-effects similarly, and calls them mutation.
Inside mutation folder we create 4 files add.js, update.js, remove.js and index.js.
add.js file for Create a new user, update.js file for update specific user, remove.js file for remove a user and index.js file combine all the files together.
# Create New User
Creating a new user add a mutation with fields of user name args and resolve method which will be invoked by the GraphQL execution engine in order to create user for the request.
https://gist.github.com/tithi021/a086e80a5f7288d8e1be039f32d936f4
# Update User
Update existing user we create a mutation with fields of user ID and username that we need to update and resolve method which will be invoked by the GraphQL execution engine in order to update user for the request.
https://gist.github.com/tithi021/4de7b7f0d5d11cde3f56a960acc64102
# Remove User
Remove user we create a mutation of remove with fields user ID and remove target user from mongo database.
https://gist.github.com/tithi021/6e6b58458e8a808f641b4ec298b543d2
And graphql/index.js file adding a mutation in our user schema.
https://gist.github.com/tithi021/32b80aa7c9e9b5b83cfcb2787e5291c0
GraphQL Client Side
Open a new terminal window and cd into the project client directory and install dependent packages by running `npm install` and run the command `ng serve — open`. Open http://localhost:4200 from the browser and you will see a CRUD application.
For client side we used GraphQL Apollo Client with Angular5.
Apollo Client is a client-side library that leverages the power of a GraphQL API to handle data fetching and management, so that we can spend less time plumbing data and more on building application.
Project Structure
In graphql.module.ts file here’s we create a connection with GraphQL server API and import this `GraphQLModule` module in app.module.ts.
https://gist.github.com/tithi021/489f32cc546078e3977fbc4a8ea787d6
https://gist.github.com/tithi021/864f7de16b7f96f8a1eed297b91d081a
In global-query.ts, Here’s define Apollo GraphQL queries and mutations by using `graphql-tag`. Graphql Tag is a JavaScript template literal tag that parses GraphQL queries.
https://gist.github.com/tithi021/0069ac02886b9c0215aa44f63fe8bb4f
In app.component.html, this file contains a table of users list and create new user form. And in app.component.ts contains all function to create a new user, update existing user, remove user and get a list of all user.
https://gist.github.com/tithi021/2ec80b02c5ad6fb097481e6ad05769b7
https://gist.github.com/tithi021/1d643b2149bc50936fcee8697d67b913
That’s it. I tried to cover all the stage of GraphQL at Server and Client Side using Mean Stack technology.
In short, GraphQL is a new way to interact with a server. In Rest API we are used to calling a specific URL in order to get some list of data from server. But GraphQL things make more easier It’s retrieving data and manipulate more efficient because It’s encourage using only the data needed based on client request.
Follow me at twitter @afrozatithi