Getting started with GraphQL

Slide 1

Slide 1 text

GETTING STARTED WITH GraphQL Agilize Cloud Accounting, 24/11/2017 Weekly company-internal DevTalks

Slide 2

Slide 2 text

Hallo! I’M THIAGO COLARES Agile manager Full stack developer Open source Co-founder @ Agilize Cloud Accounting @thicolares

Slide 3

Slide 3 text

1. DEFINE: GraphQL

Slide 4

Slide 4 text

WHAT IS GRAPHQL ○ Declarative data fetching ○ Alternative to REST ○ Single endpoint → responds to queries

Slide 5

Slide 5 text

/authors/ /authors//books /authors//followers 3 ENDPOINTS

Slide 6

Slide 6 text

query query query 1 SINGLE ENDPOINT

Slide 7

Slide 7 text

DEMO 1

Slide 8

Slide 8 text

2. CHARACTERISTICS

Slide 9

Slide 9 text

GraphQL TIMELINE ○ Developed by Facebook on 2012 ○ Presented → React.js Conf 2015 ○ Is not for React Developers ○ Other companies had the same initiative ○ Netflix → Falcor ○ Cousera → Now uses GraphQL

Slide 10

Slide 10 text

REST CHALLENGES ○ Need for efficient data loading (mobile) ○ Variety of different frontend frameworks ○ Rapid feature development

Slide 11

Slide 11 text

GraphQL BENEFITS ○ No mover over or underfetching ○ Almost non API if the interface changes ○ Faster feedbacks cycles

Slide 12

Slide 12 text

INSIGHTFUL ANALYTICS ○ Fine-grained info about what read data ○ Evolving and deprecating API

Slide 13

Slide 13 text

3. KEY CONCEPTS

Slide 14

Slide 14 text

type Query { ... } type Mutation { ... } type Subscription { ... } ROOT TYPE

Slide 15

Slide 15 text

query { User(id: 123) { name posts { title } } } QUERY HTTP POST

Slide 16

Slide 16 text

{ "data": { "User": { "name": "Joston Muriel", "posts": [ {title: "Hello, it's me"} {title: "Lines in the sand"} ] } } } RESPONSE RESPONSE

Slide 17

Slide 17 text

SCHEMA ○ Strong type system ○ Schema as client-server contract ○ Client and server can work independently ○ Schema Definition Language

Slide 18

Slide 18 text

type Person { name: String! age: Int! } DEFINING SIMPLE TYPES ! → required

Slide 19

Slide 19 text

type Person { name: String! age: Int! } ADDING A RELATION type Post { title: String! author: Person! }

Slide 20

Slide 20 text

type Person { name: String! age: Int! posts: [Post!]! } ADDING A HAS-MANY RELATION type Post { title: String! author: Person! }

Slide 21

Slide 21 text

DEMO 2

Slide 22

Slide 22 text

4. MUTATIONS

Slide 23

Slide 23 text

WRITING DATA WITH MUTATIONS ○ A query too ○ You can ask for the returning fields ○ Even nested ones

Slide 24

Slide 24 text

3 KINDS OF MUTATIONS ○ creating new data ○ updating existing data ○ deleting existing data

Slide 25

Slide 25 text

A MUTATION mutation { createPerson(name: "Bob", age: 36) { name age } } Similar syntax. Mutation keyword. Special root field.

Slide 26

Slide 26 text

DEFINING A MUTATION type Mutation { createPerson(name: String!, age: String!) Person! ... }