graphql story: intro to graphql
TRANSCRIPT
LET ME TELL YOU A STORY
AGILE?#1: WHAT COMES AFTER
AFTER AGILE COMES…
LEAN
MVC?#2: WHAT COMES AFTER
AFTER MVC COMES….
ELM ARCHITECTURE OR REACT+REDUX
REST?#3: WHAT COMES AFTER
GRAPHQL
WHY WE NEED IT?
MONOLITHIC MICROSERVICESCOMPONENTS
REST
NEED SOME REST
List of Jane’s friends+ Their names+ Their locations
GET /users/Jane/friends [1, 2, 3]
GET /friends/{ID} {name: “…”, locationID: 1}
GET /location/{ID} {name: “Depok”}
GET /users/Jane/friends
[1, 2, 3]
GET /friends/{ID}
{name: “…”, locationID: 1}
GET /location/{ID}
{name: “Depok”}
MEET GRAPHQL
DATABASE LAYER MONGODB, POSTGRESQL, MYSQL, ETC.
GRAPHQL
DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS
GET /users/Jane/friends
[1, 2, 3]
GET /friends/{ID}
{name: “…”, locationID: 1}
GET /location/{ID}
{name: “Depok”}
QUERY RESULT 1 { 2 person(personID: 4) { 3 name, 4 birthYear, 5 homeworld { 6 name 7 }, 8 filmConnection { 9 films { 10 title 11 } 12 } 13 } 14 }
1 { 2 "data": { 3 "person": { 4 "name": "Darth Vader", 5 "birthYear": "41.9BBY", 6 "homeworld": { 7 "name": "Tatooine" 8 }, 9 "filmConnection": { 10 "films": [ 11 { 12 "title": "A New Hope" 13 }, 14 { 15 "title": "The Empire Strikes Back" 16 }, 17 { 18 "title": "Return of the Jedi" 19 }, 20 { 21 "title": "Revenge of the Sith" 22 } 23 ] 24 } 25 } 26 } 27 }
GRAPHQL SERVERTHE FUN PART BEGIN
BUILD GRAPHQL SERVER
PRE-REQUISITE
$ mkdir graphql-server
$ cd graphql-server
$ npm init -f
$ npm install —save express
$ npm install —save babel-preset-es2015
$ npm install —save graphql express-graphql
DEMO TIME!
SOME CONCLUSIONEND IS NEAR
GRAPHQL IS A QUERY LANGUAGE, NOT A NEW DATABASE
EASY TO WRITE QUERY
THE QUERIES DESCRIBE THE SHAPE OF THE RESPONSE
NO OVER-FETCHING NO UNDER-FETCHING
QUERYING OBJECTS, CONNECTIONS, NESTING, IN SINGLE ROUND TRIP TO AND FROM SERVER
FUTURE REFERENCES
LEARN MORE
▸ GraphQL Introduction
▸ Exploring GraphQL video
▸ Learn GraphQL by Kadira
▸ Your First GraphQL Server
▸ Intro To GraphQL
https://github.com/rizafahmi/jakartajs-graphql-server
https://hacktiv8.com/
@rizafahmi22
https://jakartajs-join.herokuapp.com/
THOUGHTS?