Getting Started with GraphQL

Getting Started with GraphQL talk at Full Stack Developers Conference Lagos.

1. Shodipo Ayomide (@developerayo) | Full Stack Developers Conference)
2. Hello! 2
3. What is GraphQL 3
4. 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. 5 GraphQL is a query language for your API
7. 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. 8 GraphQL supports a whole lot of languages and frameworks Kotlin GO Crystal
9. Companies using GraphQL 9 http://blog.honeypot.io/assets/images/ql-companies.png
10. 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
12. 12 GraphQL To The Rescue
13. 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. 14 { viewer { name email } } Example
15. 15 { viewer { name email } } Example
16. 16 { "data": { "viewer": { "name": "Shodipo Ayomide", "email": "johndoe@johndoe.com" } } } { viewer { name email } } POST: https://api.github.com/graphql
17. 17 { user(login: "developerayo") { name location repositories { name } } } Example
18. 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" }, ... } } }
19. 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. 20 GET /GraphQL Request Body Response Body query { post(id: 1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
21. 21 GET /GraphQL Request Body Response Body query { post(id: 1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
22. 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. 23 A little Workshop Open CodeSandBox
24. 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
28. There is no Limit to what you can build 28
29. GraphQL Tools 29
30. 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
31. GraphiQL 31 An interactive in-browser GraphQL IDE tool for GraphQL https://github.com/graphql/graphiql
32. 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
33. READY TO LEARN GRAPHQL? 33
34. 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
36. Thanks! Any questions? You can find me @developerayo on Twitter, GitHub, Everywhere Read some blog post here https://shodipoayomide.com 36