Want to create interactive content? It’s easy in Genially!

Get started free

An Introduction to GraphQL

oussama akir

Created on March 7, 2022

Wild Code School

Start designing with a free template

Discover more than 1500 professional designs like these:

Terrazzo Presentation

Visual Presentation

Relaxing Presentation

Modern Presentation

Colorful Presentation

Modular Structure Presentation

Chromatic Presentation

Transcript

Brief Introduction to

GraphQL

Index

1. The Story

2. What is GraphQL ?

3. What GraphQL is not?

4. Advantages

5. Limitations

6. GraphQL VS REST

7. Stop talking, demo time

The Story

2011

The industry shift to mobile

Facebook mobile app face performance issues

2012

Facebook decide to build the mobile app from scratch

But what was the problem to solve ?

A lot of informations to fetch !

Under fetching

Gather the data need to access multiple round trips between the client and server

Over fetching

Downloads more informations than is actually required

It's notEnvironment Friendly

🌱

Unnecessary energy consumption

Feb 2012

GraphQLidea wasBorn !

August 2012

Facebook first mobile app for iOS was released with GraphQL

2015

the GraphQL first spec published

Unlock the next chapter

🔓

Which of these statements is true?

  1. GraphQL is a database technology
  2. GraphQL can only be used together with SQL
  3. GraphQL was invented by Facebook
  4. GraphQL was developed by Netflix and Coursera

Which of these statements is true?

  1. GraphQL is a database technology
  2. GraphQL can only be used together with SQL
  3. GraphQL was invented by Facebook
  4. GraphQL was developed by Netflix and Coursera

So what is GraphQL?

" A query language for your API "

" GraphQL makes it easier for app developers to get the data they need without needing to know which sources it’s coming from "

" GraphQL is a syntax that describes how to ask for data "

" Allows to query deeply nested associations "

Operations Type

  • Query
  • Mutation
  • Subscription

Retrieve Data

Manipulate Data ( add, delete, update )

Can change their result over time by mainting active connection to the server (via websocket) enabling the server to push updates.

Unlock the next chapter

🔓

What are GraphQL subscriptions used for?

  1. Event-based realtime functionality
  2. Schema-based realtime functionality
  3. You use them to subscribe to the GraphQL Weekly newsletter
  4. They combine Queries and Mutations and allow you to read and write data

What are GraphQL subscriptions used for?

  1. Event-based realtime functionality
  2. Schema-based realtime functionality
  3. You use them to subscribe to the GraphQL Weekly newsletter
  4. They combine Queries and Mutations and allow you to read and write data

What is NOT ?

GraphQL Misconceptions

GraphQL IS NOT SQL

IS NOT Frontend technology

Fetching IS NOT works Magically

IS NOT Only for React Developer's

GraphQL and REST, CAN co-exist

IS NOT a Database

Why using Graphql ?

performance

Under fetching

Prevents multiple round-trips

Ask for what you need,Get exactly that !

To reduce bandwidth, especially on mobile and low-energy devices.

Language agnostic

plenty of client and server libraries are available

More than 23 languages already supported

Documentation

Introspection

  • Learn about the available fields and types of a GraphQL schema
  • Documentation is automatically generatedand always up-to-date

Strongly Typed

Robust static types

  • Code is predictable
  • Earlier detection of errors and speeds development
  • The response in a simple, secure, and predictable shape

Developer Experience

Flexibility & Evolution

  • Add new fields and types to GraphQL API without breaking changes ( incremental )
  • Developers don’t have to maintain multiple versions of the API
  • Single source of truth

Community

🧰

Powerful developer tools

Widespread adoption

Widespread adoption

Limitations

Pain points

  • Lack of resources on the backend part ( Java )
  • A single endpoint make caching complicated => should use tools
  • Learning curve
  • Move complexity to backend (Query Complexity)

GraphQL VS REST

But wait ! what is REST?

  • A client-server architecture
  • Stateless operations such as POST, PUT, DELETE, GET, ...
  • Caching Mechanism (using the same URL )
  • Easily Scalable

Key Differences

What is REST Good for?

  • Error Reporting and Monitoring ( graphql return 200 OK status )
  • Caching
  • Security

What is GraphQL Good for?

🎌

  • Performance
  • Better DX
  • A humain-readable query
  • Single endpoint
  • get exactly what you need !
  • Evolution

Which is Better ? GraphQL will Replace REST ?

Demo

Wrapping Up

What's an API ?

Client

Application

API

Waiter

Kitchen

Server

To summarize

  • Graphql is solving many problems
  • Graphql has some drawbacks that shouldn't be ignored
  • Avoid "Hype Driven Development"

What's next ?

if we do it, we know it

  • Graphql tutorial
  • Official website introduction:
  • talk about REST VS Graphql
  • Lessons from 4 Years of GraphQL

https://www.howtographql.com/ https://graphql.org/learn/ https://www.youtube.com/watch?v=yLf0rIaRtRchttps://www.youtube.com/watch?v=zVNrqo9XGOs&t=2s

Thanks!