GraphQL

An Introduction

Lee Blazek

Today!

About Me
- What is a GraphQL?
- Current support
- Queries
- Mutations
- Basic usage

Demo project

About Me

React, Angular, JS, Mean Stack, Front-end, Node api's, with a side of iOS

SME Javascript

Started development in 2003 ~ 17 years

Full-stack JS since 2013 ~ 7 years

Since Angular v 0.8

node 0.x

What about you?

Please city, country, and a short description of your job/career/level in chat.

(sorry there's to many people to go thru all in call)

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.
ONLY ONE ENDPOINT as opposed to multiple REST endpoints
Works over normal http methods
2012 - Facebook internally started it

2015 - public beta release

2018 - moved to non-profit GraphQL/hosted by linux foundation

What is a GraphQL?

Current Support

Libraries for all sorts of different server side languages.

Basic Query

// DEFINED in
// your code 

type Query {
  me: User
}

type User {
  id: ID
  name: String
}

Define types
Fields in the Types

// HTTP POST Qyery Body

{
  me {
    name
  }
}

// Returns JSON
{
  "me": {
    "name": "Luke Skywalker"
  }
}

Basic Mutation

Define types
Fields in the Types

// Variables 

{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}


// HTTP POST Query Body

mutation CreateReviewForEpisode($ep: Episode!,
                                $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

// Returns JSON
{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}

Basic Mutation

// HTTP POST Query Body

mutation CreateReviewForEpisode($ep: Episode!,
                                $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

// Returns JSON
{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}