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": "johndoe@johndoe.com" } } } { 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

No content

No content

No content

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