Tweet
Tweet

Slide 1

Slide 1 text

Introduction to GraphQL Jennifer Bland

Slide 2

Slide 2 text

Three Truths and One Lie •I have visited 82 countries •I graduated from college before IBM introduced the IBM PC •My home is 400 sq ft •I have never been west of the Mississippi River

Slide 3

Slide 3 text

www.jenniferbland.com @ratracegrad ratracegrad@gmail.com youtube.com/c/jenniferbland !3

Slide 4

Slide 4 text

What Is GraphQL?

Slide 5

Slide 5 text

A programming language !5

Slide 6

Slide 6 text

A special type of database !6

Slide 7

Slide 7 text

A library !7

Slide 8

Slide 8 text

What Is GraphQL?

Slide 9

Slide 9 text

Graph QUERY LANGUAGE

Slide 10

Slide 10 text

Why GraphQL?

Slide 11

Slide 11 text

!1 1

Slide 12

Slide 12 text

!1 2

Slide 13

Slide 13 text

Get the Data 13 /dynamic-content/projects/v1/1 /dynamic-content/homepage/v2/1

Slide 14

Slide 14 text

!1 4

Slide 15

Slide 15 text

Why GraphQL?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

!1 7

Slide 18

Slide 18 text

!1 8

Slide 19

Slide 19 text

Components

Slide 20

Slide 20 text

Schema

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

22 // GET ‘/graphql { projects {
 title image } } // result { projects {
 title: “Build a Fire Pit image: “firepit.png” } }

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

• Schema is strongly-typed • Client picks what they need • It’s fast • It’s flexible

Slide 27

Slide 27 text

Queries

Slide 28

Slide 28 text

Queries 28 query { projects } query { projects { title image }

Slide 29

Slide 29 text

Queries 29 query { relatedProjects { # this is an array title image details { description tools category }

Slide 30

Slide 30 text

Queries 30 query { relatedProjects(id: 72113) { title image details { description tools category }

Slide 31

Slide 31 text

Queries 31 query getRelatedProject($id: String) { relatedProjects(id: $id) { title image details { description tools category }

Slide 32

Slide 32 text

Resolvers

Slide 33

Slide 33 text

Resolvers 33 Query: { relatedProjects (root, args) { return Projects.find({ id: args.id }); } }

Slide 34

Slide 34 text

Resolvers 34 Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() } }

Slide 35

Slide 35 text

Demo

Slide 36

Slide 36 text

Resources graphqlweekly.com howtographql.com graphqlhub.com developer.github.com/v4/explorer/

Slide 37

Slide 37 text

Three Truths and One Lie •I have visited 82 countries •I graduated from college before IBM introduced the IBM PC •My home is 400 sq ft •I have never been west of the Mississippi River

Slide 38

Slide 38 text

Jennifer Bland www.jenniferbland.com ratracegrad@gmail.com