What is GraphQL, really?

It’s an alternative to REST, so what? Why should I use GraphQL instead of REST endpoints?

**** Here's an example of two traditional HTTP calls to find students and their classes ****Call 1: HTTP get to: 'students/<id>'
Returns:
{ "student":
{
"id": 1,
"firstName":"Jane",
"lastName":"Smith"
}
}
Call 2: HTTP get to: 'students/<id>/classes'
Returns:
{ "classes":
[{
"id": 1,
"className":"math"
},
{
"id": 1,
"className":"english"
}]
}
**** Here is the same information as one GraphQL query ****
Query:
query { Student( id:1 ){
firstName
lastName
classes {
className
}
}
}
Returns:{ "data":
{ "Student":
{ "firstName":"Jane",
"lastName":"Smith",
"classes":
[{
"className": "math"
},
{
"className":"english"
}]
}
}
}

Ok, you’ve piqued my interest. So how does GraphQL work?

Schemas: How GraphQL Defines and Structures the Data it Receives

**** Simple Schema Example for a Type Called Student ****type Student { 
firstName: String! #the exclamation mark means it's required
lastName: String!
}

Queries: How GraphQL Asks for Data

**** Basic Query Asking the Server for All Students ****{ allStudents 
{
firstName
lastName
}
}
Returns: {"allStudents":
[{
"firstName":"Jane",
"lastName":"Smith"
},
{
"firstName":"John",
"lastName":"Doe"
}]
}

Mutations: How GraphQL Manipulates Data

  • create new data
  • update existing data
  • delete existing data
**** A Create Mutation to Make a New Student ****mutation { createStudent(firstName: "Robert", lastName: "Johnson") 
{
firstName
lastName
}
}
The server response would look like this:"createStudent": {
"firstName":"Robert",
"lastName":"Johnson"
}

Resolvers: How GraphQL Fetches the Data for Its Query (or Mutation) Field

**** Sample Query and the Resolvers Corresponding to Each Field ****query { Student(id:1){ 
firstName
lastName
}
}
Resolvers:Student(id: String!): Student
firstName: (student: Student!) String
lastName: (student: Student!) String

GraphQL Client Libraries

  1. building and sending an HTTP request (fetch in JavaScript),
  2. receiving and parsing the response,
  3. storing the data (locally or persisted),
  4. and finally displaying the data in the UI,
  1. describing the data requirements
  2. displaying the returned data in the UI

More About GraphQL

GraphQL and the Client Side

GraphQL and the Server Side

**** Sample Query and Execution Algorithm ****type Query {
director(id: ID!): Director
}
type Director {
movies: [Movie]
}
type Movie {
title: String
description: String
}
**** Sample Query to the Server ****query { director(id: "2wsx3edc")
{ movies
{
title
description
}
}
}
**** Execution Algorithm Visualized ****Query.director(root, { id:"2wsx3edc" }, context) -> director
Director.movies(director, null, context) -> movies
for each movie in movies
Movie.title(movie, null, context) -> title
Movie.description(movie, null, context) -> description
**** Sample Query and API Calls ****query{ movies
{ title
director
{
firstName
lastName
}
}
}
// Regardless of the fact that the API is being called for the same // piece of data multiple times, the query executes for the director // infofetch('/directors/1')
fetch('/directors/2')
fetch('/directors/2')
fetch('/directors/1')
fetch('/directors/1')
**** Sample API Calls with DataLoader****directorLoader = new DirectorLoader()// Queue up all the fetchesdirectorLoader.load(1);
directorLoader.load(2);
directorLoader.load(2);
directorLoader.load(1);
// Then the loader only makes the necessary amount of calls for each // unique piece of informationfetch('/directors/1')
fetch('/directors/2')

GraphQL Tooling and Its Ecosystem

**** Introspection Query and Return Information ****query{ 
__schema {
types
{
name
}
}
}
Schema Definition:type Query {
director(id: ID!): Director
}
type Director {
movies: [Movie]
}
type Movie {
title: String
description: String
}
Results:{
"data": {
"__schema": {
"types": [
{
"name": "Query"
},
{
"name": "Director"
},
{
"name": "Movie"
},
{
"name": "ID"
},
{
"name": "String"
},
{
"name": "__Schema"
},
{
"name": "__Type"
},
{
"name": "__TypeKind"
},
{
"name": "__Field"
},
{
"name": "__InputValue"
},
{
"name": "__EnumValue"
},
{
"name": "__Directive"
},
{
"name": "__DirectiveLocation"
}
]
}
}
}

In Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paige Niedringhaus

Paige Niedringhaus

Staff Software Engineer, previously a digital marketer. Frontend dev is my focus, but always up for learning new things. Say hi: www.paigeniedringhaus.com