1 of 36

Beginners Guide to GraphQL

2 of 36

GraphQL

  1. Why?
  2. What?
  3. How?

3 of 36

Why?

It was 1984 2011.

Facebook had recently launched their mobile app on iOS as well as Android.

They had a vision of reusing lot of Facebook’s already existing code. ( Write once, Run Anywhere )

4 of 36

Data Services

Web Server

Web Browser

Native App

HTML

Mobile Apps of Facebook were just the Web Browsers wrapped in a Native Frame. (Web View)

5 of 36

Issues 😓

  • Success of mobile app moved Facebook’s attention to mobile app user base.
  • Started employing larger images, rich animations and gestures in the app.
  • Browsers couldn’t keep up.
  • Lower frame rates.
  • App started crashing.
  • Apple’s less support for Safari than for developing iOS App SDK.

6 of 36

The Native Architecture

Data Services

App Services

Native App

Data

7 of 36

Issues with RESTful API and FQL ( Facebook’s SQL-like API )

8 of 36

Visualisation of Data

9 of 36

Overfetching / Underfetching of Data

GET /usr/info

​

Returns pretty much everything.

{

name: “John Doe”,

username: “jdoe123”,

age: 31,

gender: “M”,

country: “India”,

Profession: “Programmer”

}

​

10 of 36

Overfetching / Underfetching of Data

11 of 36

More issues

  • Too many endpoints.
  • No metadata about what the client is going to receive.
  • Could return pretty much anything.

12 of 36

Client

Server

REST

Endpoints

13 of 36

Client

Server

GraphQL

Endpoints

14 of 36

The Native Architecture with GraphQL

Data Services

App Services

Native App

15 of 36

What is GraphQL?

REQUEST

​

{

me{

name

}

}

RESPONSE

​

{

me{

name: “Siddhant”

}

}

16 of 36

Server

17 of 36

Important Concepts

  • Schema
    • Schema Definition Language (SDL)
    • types
    • Query
    • Mutations
    • Subscriptions
  • GraphQL architecture with a connected Database
  • Resolver Functions

18 of 36

https://www.howtographql.com/basics/2-core-concepts/

19 of 36

Wait..but why is GraphQL

​

GraphQL??

​

​

Any ideas? Graph Databases? Anyone?

20 of 36

GraphQL operates on App Data Graph

When we write any application, we generally operate on set of objects and these objects are connected in certain capacities.

The relationships between these objects form an App Data Graph.

And, GraphQL allows us to extract trees from the app data graph.

21 of 36

Yes, GraphQL allows us to extract trees from the app data graph.

Example: A library Application

​

​

22 of 36

Let’s run a query

query {

book(isbn: "9780674430006") {

title

authors {

name

}

}

}

{

book: {

title: “Capital in the Twenty First Century”,

authors: [

{ name: ‘Thomas Piketty’ },

{ name: ‘Arthur Goldhammer’ },

]

}

}

23 of 36

Extracting data from App Graph

24 of 36

And Here’s the tree

25 of 36

Benefits

26 of 36

​

No more Over and Underfetching

  • 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.

​

27 of 36

Rapid Product Iterations on the Frontend

App Server

Client

This data shape please!

Here’s your data

28 of 36

Insightful Analytics on the Backend

  • GraphQL allows you to have fine-grained insights about the data that’s requested on the backend.

​

  • As each client specifies exactly what information it’s interested in, it is possible to gain a deep understanding of how the available data is being used.

29 of 36

A Schema & Type System

  • GraphQL uses a strong type system to define the capabilities of an API.
  • Once the schema is defined, the teams working on frontend and backends can do their work without further communication since they both are aware of the definite structure of the data that’s sent over the network.
  • Frontend teams can easily test their applications by mocking the required data structures

​

​

30 of 36

Being used by many giant organizations

  • Netflix’ Data fetching library “Falcor” is inspired from GraphQL.
  • After GraphQL was open-sourced, Coursera completely cancelled their own efforts and hopped on the GraphQL train.
  • More info at - https://graphql.org/users/

31 of 36

Open Source. Try to help out.

32 of 36

When to use GraphQL?🤔

33 of 36

References

34 of 36

Looking for the How? Let the coding begin 💻🔥

35 of 36

GSoC & Outreachy Meetup

Next Tuesday

​

​

36 of 36

Join the Community

@osdcjiit

#jiit-lug on Freenode

github.com/osdc

telegram.me/jiitosdc