Tweet
Tweet

Slide 1

Slide 1 text

INTRODUCTION TO GRAPHQL PHP UK CONFERENCE 2018 @MICHAELCULLUMUK

Slide 2

Slide 2 text

INTRODUCTION TO GRAPHQL PHP UK CONFERENCE 2018 @MICHAELCULLUMUK

Slide 3

Slide 3 text

@MICHAELCULLUMUK ME?

Slide 4

Slide 4 text

MICHAEL CULLUM @MICHAELCULLUMUK

Slide 5

Slide 5 text

@MICHAELCULLUMUK GRAPHS

Slide 6

Slide 6 text

@MICHAELCULLUMUK GRAPHS

Slide 7

Slide 7 text

@MICHAELCULLUMUK GRAPHS USER ORGANISATION REPOSITORY ORGANISATION REPOSITORY COMMIT COMMIT COMMIT USER USER USER COMMIT COMMIT COMMIT USER USER USER USER USER USER

Slide 8

Slide 8 text

@MICHAELCULLUMUK REST

Slide 9

Slide 9 text

@MICHAELCULLUMUK REST API GET /repos/:id
 GET /orgs/
 GET /orgs/:id/
 GET /orgs/:id/repos/
 GET /orgs/:id/repos/:id/
 POST /orgs/ 200 OK
 200 OK
 200 OK
 200 OK
 200 OK
 201 Created

Slide 10

Slide 10 text

@MICHAELCULLUMUK REST API { "_links": { "self": “http://api.github.com/orgs/20/repos“ }, "limit": 100, "results": [ { "_expandable": { "commits": “/repos/105/commits“, "collaborators": "/repos/105/collaborators", }, "id": "3965071", "title": “symfony/symfony", "org": “Symfony", ... }, { ... } ], "size": 2, "start": 0 }

Slide 11

Slide 11 text

@MICHAELCULLUMUK GRAPH QL

Slide 12

Slide 12 text

@MICHAELCULLUMUK GRAPHQL IS (1) A QUERY LANGUAGE FOR YOUR API

Slide 13

Slide 13 text

@MICHAELCULLUMUK GRAPHQL IS (2) A SERVER-SIDE RUNTIME FOR EXECUTING QUERIES USING A TYPE SYSTEM YOU DEFINE

Slide 14

Slide 14 text

@MICHAELCULLUMUK WAT?

Slide 15

Slide 15 text

@MICHAELCULLUMUK QUERYING

Slide 16

Slide 16 text

@MICHAELCULLUMUK { me { name } } { "data": { "me": { "name": "Michael Cullum" } } } Request (Graph QL) Response (JSON) BASIC PARAMETER FETCHING

Slide 17

Slide 17 text

@MICHAELCULLUMUK { me { name company } } { "data": { "me": { "name": "Michael Cullum", "company": "SamKnows" } } } Request (Graph QL) Response (JSON) BASIC PARAMETER FETCHING

Slide 18

Slide 18 text

@MICHAELCULLUMUK { me { name repos { name } } } { "data": { "me": { "name": "Michael Cullum", "repos": [ { "name": "michaelcullum.com" }, { "name": "my-cool-library" } ] } } } Request (Graph QL) Response (JSON) BASIC PARAMETER FETCHING

Slide 19

Slide 19 text

@MICHAELCULLUMUK GITHUB

Slide 20

Slide 20 text

@MICHAELCULLUMUK { user(login: "michaelcullum") { name } } Request (Graph QL) Response (JSON) ARGUMENTS { "data": { “user": { "name": "Michael Cullum" } } }

Slide 21

Slide 21 text

@MICHAELCULLUMUK { user(id:"1000") { name height(unit: FOOT) } } ARGUMENTS

Slide 22

Slide 22 text

@MICHAELCULLUMUK GITHUB

Slide 23

Slide 23 text

@MICHAELCULLUMUK THE REQUEST AND RESPONSE MATCH

Slide 24

Slide 24 text

@MICHAELCULLUMUK { me { name company } } { "data": { "me": { "name": "Michael Cullum", "company": "SamKnows" } } } Request (Graph QL) Response (JSON) RECAP

Slide 25

Slide 25 text

@MICHAELCULLUMUK { user { name repos { name } } } { "data": { “user”: { "name": "Michael Cullum", "repos": [ { "name": "michaelcullum.com" }, { "name": "my-cool-library" } ] } } } Request (Graph QL) Response (JSON) RECAP

Slide 26

Slide 26 text

@MICHAELCULLUMUK { fabien: user(login:"fabpot") { name } andrew: user(login:”andrew") { name } } Request (Graph QL) Response (JSON) ALIASES { "data": { "fabien": { "name": "Fabien Potencier" }, “andrew": { "name": "Andrew Nesbitt" } } }

Slide 27

Slide 27 text

@MICHAELCULLUMUK { fabien: user(login: "fabpot") { name email company } michael: user(login: "michaelcullum") { name email company } } Without Fragments With Fragments FRAGMENTS { fabien: user(login: "fabpot") { ...userdetails } michael: user(login: "michaelcullum") { ...userdetails } } fragment userdetails on User { name email company }

Slide 28

Slide 28 text

@MICHAELCULLUMUK GITHUB

Slide 29

Slide 29 text

@MICHAELCULLUMUK OPERATIONS

Slide 30

Slide 30 text

@MICHAELCULLUMUK QUERY OPERATIONS query getUserAndCompany ($login: String!) { user(login: $login) { name company isHireable } } {"login": "michaelcullum"} Request (Graph QL) Variables

Slide 31

Slide 31 text

@MICHAELCULLUMUK QUERY OPERATIONS query getUserAndCompany ($login: String!) { user(login: $login) { name company isHireable @include(if: $hireable) } } { "login": "michaelcullum", “hireable”: true } Request (Graph QL) Variables

Slide 32

Slide 32 text

@MICHAELCULLUMUK GITHUB

Slide 33

Slide 33 text

@MICHAELCULLUMUK MUTATIONS

Slide 34

Slide 34 text

@MICHAELCULLUMUK MUTATION VS QUERYING mutation CreateRepoForUser($user: User!, $repo: RepoInput!) { createRepo(user: $user, repo: $repo) { name Repo } } { "user": "michaelcullum", "repo": { "name": “mailing-lib”, "description": “A library for emails” } }

Slide 35

Slide 35 text

@MICHAELCULLUMUK DEFINE AN INPUT SCHEMA TYPE input RepoInput { name: String! description: String! }

Slide 36

Slide 36 text

@MICHAELCULLUMUK SCHEMAS

Slide 37

Slide 37 text

@MICHAELCULLUMUK OBJECT TYPES type ConferenceTalk { title: String!
 speaker: String! track: Track! ratings: [Review!] }

Slide 38

Slide 38 text

@MICHAELCULLUMUK QUERY TYPE type Query { talk(id: ID!): ConferenceTalk review(id: ID!): Review speaker(name: String!): Speaker }

Slide 39

Slide 39 text

@MICHAELCULLUMUK ▸ String ▸ Int ▸ Float ▸ Boolean ▸ ID SCALAR TYPES

Slide 40

Slide 40 text

@MICHAELCULLUMUK ENUMS enum Track { REDSHIFT MERCARI BYTEMARK }

Slide 41

Slide 41 text

@MICHAELCULLUMUK INTROSPECTION

Slide 42

Slide 42 text

@MICHAELCULLUMUK GITHUB

Slide 43

Slide 43 text

@MICHAELCULLUMUK SERVER-SIDE

Slide 44

Slide 44 text

@MICHAELCULLUMUK COMPOSER REQUIRE WEBONYX/GRAPHQL-PHP

Slide 45

Slide 45 text

@MICHAELCULLUMUK SINGLE ENDPOINT FILE

Slide 46

Slide 46 text

@MICHAELCULLUMUK TYPES $userType = new ObjectType( [ 'name' => 'User', 'description' => 'Our blog visitor', 'fields' => [ 'firstName' => [ 'type' => Type::string(), 'description' => 'User first name', ], 'email' => Type::string(), ], 'resolve' => function() { return [ 'id' => 1, 'title' => 'Example blog post', 'authorId' => 1 ]; } ] );

Slide 47

Slide 47 text

@MICHAELCULLUMUK DEFAULT FIELD RESOLVER

Slide 48

Slide 48 text

@MICHAELCULLUMUK API PLATFORM

Slide 49

Slide 49 text

@MICHAELCULLUMUK REST VS GRAPH QL

Slide 50

Slide 50 text

@MICHAELCULLUMUK ‣ REST AND GRAPHQL ARE TOTALLY DIFFERENT ‣ GRAPHQL ISN'T A MAGIC BULLET, NOR IS IT “BETTER" ‣ YOU CAN DEFINITELY USE BOTH AT THE SAME TIME ‣ GRAPHQL IS DOPE IF USED FOR THE RIGHT THING Phil Sturgeon

Slide 51

Slide 51 text

@MICHAELCULLUMUK REST

Slide 52

Slide 52 text

@MICHAELCULLUMUK GRAPH QL

Slide 53

Slide 53 text

@MICHAELCULLUMUK VERSIONING

Slide 54

Slide 54 text

@MICHAELCULLUMUK ISSUES

Slide 55

Slide 55 text

@MICHAELCULLUMUK CACHING

Slide 56

Slide 56 text

@MICHAELCULLUMUK INFORMATION HIDING

Slide 57

Slide 57 text

THANKS @MICHAELCULLUMUK

Slide 58

Slide 58 text

INTRODUCTION TO GRAPHQL PHP UK CONFERENCE 2018 @MICHAELCULLUMUK