What is GraphQL?

What is GraphQL?

• Invented by Facebook Mobile Department (2012)
• Open Sourced 2015
• Query Language
• Made for APIs

API?

Why don't use

REST

Whats wrong with REST?

• Multiple calls
• Define nesting
• Define selected fields
• Multiple endpoints
• GET requests with limited query size

All in one Query?

Why don't use

SQL

Whats wrong with SQL?

• Database dependent
• Only subset of features
• Confusing notation
• Not made for API

Why GraphQL?

Why GraphQL?

• De-Coupled from storage
• Whole request in one query
• POST to a single endpoint
• Validated and Structured
• Easy to optimize

Crash Course

Server

Types

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

• Employment
• GraphQL Object Type, meaning it's a type with some fields.
• Most of the types in your schema will be object types.

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

• firstName, lastName, worksAt
• Fields on Employment Type. That are the only
• fields which can appear on a Employment type.

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

• String
• Build in Scalar Type - resolve to a single scalar
• without any sub selections.

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

• String!
• Non-nullable field.
•  

type Employment {
  firstName: String!
  lastName: String!
  worksAt: [Shift]!
}

• [Shift]!
• Array of shifts. Since its also non-nullable, you
• can always expect an array (with zero or more Shifts).

Scalars

Build in Scalars

• Int: Signed 32-bit Integer.
• Float: Signed double-precision floating-point value.
• String: A UTF-8 character sequence.
• Boolean: true or false
• ID: Unique Identifier serialized same way as String

Custom Scalars

• scalar Date

Enums

• enum Style {
    NONE
    BOLD
    ITALIC
    UNDERLINE
  }

Interface

• interface Person {
    firstName: String!
    lastName: String!
  }

Using Interface

• type Employment implements Person {
    firstName: String!
    lastName: String!
    worksAt: [Shift]!
  }

Union

• union Conflict =
    Shift | Absence | HourAccount

Arguments

• type Employment {
    firstName: String!
    lastName: String!
    worksAt: [Shift]!
  }

Arguments

• type Employment {
    firstName: String!
    lastName: String!
    worksAt(
      startsAt: Date,
      endsAt: Date
    ): [Shift]!
  }

Schema

schema {
  query: Query
  mutation: Mutation
}

... scalars ...
... interfaces ...
... unions ...
... types ...
 
schema {
  query: Query
  mutation: Mutation
}

Query

• type Query {
    employment(id: ID): Employment
  }

Query

• type Query {
    employment(id: ID): Employment
    employments(
      id: ID,
      firstName: string
    ): [Employment]!
  }

Query

• type Query {
    employment(id: ID): Employment
    employments(
      ids: [ID],
      firstName: string
    ): [Employment]!
    billingTypes: [BillingType]!
  }

Mutation

• type Mutation {
    createEmployment(
      userId: ID!,
      companyId: ID!,
      firstName: String!,
      lastName: String!
    ): Employment!
  }

Input Type

• input EmploymentInput {
    firstName: String!
    lastName: String!
  }

Mutation

• type Mutation {
    createEmployment(
      userId: ID!,
      companyId: ID!,
      fields: EmploymentFields!,
    ): Employment!
  }

Client

Call Queries

Basic

{
  employment(id: 1) {
    firstName
  }
}

Result

{
  "employment": {
    "firstName": "Tamino"
  }
}

Named

query FetchEmployment {
  employment(id: 1) {
    firstName
  }
}

With Parameters

query FetchEmployment($id: Int!) {
  employment(id: $id) {
    firstName
  }
}

Query Call

gql`
  query FetchEmployment($id: Int!) {
    employment(id: $id) {
      firstName
    }
  }
`, {
  id: 1,
}

Call Mutations

• mutation CreateEmployment(
    $userId: Int!,
    $companyId: Int!,
    $firstName: String!,
  ) {
    createEmployment(userId: $userId, ...) {
      id
    }
  }

• Demo

• 

Libraries

What is Apollo?

• GraphQL with benefits
• A couple of packages

• Server

  
  • Lambda
  • EC2
  • Express

• Engine

  
  • Tracking
  • Monitoring
  • Caching

• Client

  
  • Transfer
  • Binding
  • Reactivity

Reactivity?

• Demo

• 

Thats it

Whats next?

• Apollo
• GraphQL
• Playground
• Slides