Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting Started with GraphQL
Search
Shodipo Ayomide
May 04, 2019
Programming
1
230
Getting Started with GraphQL
Getting Started with GraphQL talk at Full Stack Developers Conference Lagos.
Shodipo Ayomide
May 04, 2019
Tweet
Share
More Decks by Shodipo Ayomide
See All by Shodipo Ayomide
SINFO Keynote - Technical Principles of Developer Experience (DX)
developerayo
0
45
MautiCon - The Ideal Community Model: Lessons Learned
developerayo
0
54
Global Accessibility: The Future is Open - unStack Keynote
developerayo
0
58
Fast and Furious with VueJS & WebPack
developerayo
0
94
Automate Workflow processes using GitHub Actions
developerayo
0
100
Building A React App With Web And Mobile In Mind
developerayo
1
81
Design From The Realm of Open-Source
developerayo
0
41
Design From The Dimension of Open-Source - Shodipo Ayomide - React Finland
developerayo
0
73
Optimizing for Super Sonic Speed in Vue.js & Gridsome
developerayo
0
320
Other Decks in Programming
See All in Programming
TanStack DB ~状態管理の新しい考え方~
bmthd
2
490
Claude Codeで挑むOSSコントリビュート
eycjur
0
200
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
770
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
19
10k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
450
私の後悔をAWS DMSで解決した話
hiramax
4
190
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
250
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
Featured
See All Featured
Navigating Team Friction
lara
189
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How GitHub (no longer) Works
holman
315
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
How to Ace a Technical Interview
jacobian
279
23k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Bash Introduction
62gerente
615
210k
Transcript
Shodipo Ayomide (@developerayo) | Full Stack Developers Conference)
Hello! 2
What is GraphQL 3
4 GraphQL is a syntax that describes how to ask
for data, and is generally used to load data from a server to a client. In other words
5 GraphQL is a query language for your API
6
7 JavaScript Typescript Ruby PHP Python Java C/C++ Perl .NET
Erlang Elixar Haskel Rust Lua Scala Clojure ClojureScript Swift OCaml SQL R Elm GraphQL supports a whole lot of languages and frameworks
8 GraphQL supports a whole lot of languages and frameworks
Kotlin GO Crystal
Companies using GraphQL 9 http://blog.honeypot.io/assets/images/ql-companies.png
Let that sink in! 10 REST APIs returns resources you
do not need, that’s why you have a bunch of endpoint’s you do not need
11
12 GraphQL To The Rescue
Ask for what you need, and get exactly that. NO
EXTRAS 13 Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less. Apps using GraphQL are fast and stable because they control the data they get, not the server.
14 { viewer { name email } } Example
15 { viewer { name email } } Example
16 { "data": { "viewer": { "name": "Shodipo Ayomide", "email":
"
[email protected]
" } } } { viewer { name email } } POST: https://api.github.com/graphql
17 { user(login: "developerayo") { name location repositories { name
} } } Example
18 { user(login: "developerayo") { name location repositories { name
} } } POST: https://api.github.com/graphql { "data": { "user": { "name": “Shodipo Ayomide", "location": “Lagos, Nigeria", "repositories": [ { "name": “awesome-nuxtjs" }, { "name": “react-notify" }, { "name": “shodipoayomide.com" }, ... } } }
Versioning made easy 19 Add new fields and types to
your GraphQL API without impacting existing queries “think GitHub PR”. encourage cleaner, more maintainable server code.
20 GET /GraphQL Request Body Response Body query { post(id:
1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
21 GET /GraphQL Request Body Response Body query { post(id:
1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
22 GET /GraphQL Request Body Response Body query { post(id:
1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } } { "data": { "post": { "id": 1, "title": "Developerayo’s Blog", "tagline": "Articles on Soft.", "votesCount": 490, "commentsCount": 7,648, "thumbnailUrl": "google.com/tbn" "hunter": { "id": 1, "avatarUrl": "google.com/tbn" } } } }
23 A little Workshop Open CodeSandBox
The Apollo GraphQL platform is an implementation of GraphQL that
helps you manage data from the cloud to your UI. Got any questions about apollo? speak to @unicodeveloper https://www.apollographql.com
None
None
None
There is no Limit to what you can build 28
GraphQL Tools 29
GraphQL CSS 30 graphql-css is a blazing fast CSS-in-GQL library
that converts GraphQL queries into styles for your components https://github.com/braposo/graphql-css
GraphiQL 31 An interactive in-browser GraphQL IDE tool for GraphQL
https://github.com/graphql/graphiql
Graphcool 32 Self-Hosted GraphQL BaaS (Backend as a Service) https://www.graph.cool/
a GraphQL backend for your applications with a powerful web ui for managing your database and stored data
READY TO LEARN GRAPHQL? 33
Resources 34 GraphQL: https://graphql.org Apollo graphql: https://apollographql.com GraphiQL: https://github.com/graphql/graphiql Let’s
Learn GraphQL by Sara Vieira https://letslearngraphql.com/ How to GraphQL: https://howtographql.com GraphQL CSS https://github.com/braposo/graphql-css
35
Thanks! Any questions? You can find me @developerayo on Twitter,
GitHub, Everywhere Read some blog post here https://shodipoayomide.com 36