Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started with GraphQL

Getting Started with GraphQL

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

Shodipo Ayomide

May 04, 2019
Tweet

More Decks by Shodipo Ayomide

Other Decks in Programming

Transcript

  1. 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
  2. 6

  3. 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
  4. 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
  5. 11

  6. 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.
  7. 16 { "data": { "viewer": { "name": "Shodipo Ayomide", "email":

    "[email protected]" } } } { viewer { name email } } POST: https://api.github.com/graphql
  8. 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" }, ... } } }
  9. 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.
  10. 20 GET /GraphQL Request Body Response Body query { post(id:

    1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
  11. 21 GET /GraphQL Request Body Response Body query { post(id:

    1) { id title tagline votesCount commentsCount thumbnailUrl hunter: { id avatarUrl } } }
  12. 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" } } } }
  13. 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
  14. 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
  15. 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
  16. 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
  17. 35

  18. Thanks! Any questions? You can find me @developerayo on Twitter,

    GitHub, Everywhere Read some blog post here https://shodipoayomide.com 36