Grap aphQL hQL forget (the) REST? Christian Schwendtner - - PowerPoint PPT Presentation

▶
grap aphql hql forget the rest
SMART_READER_LITE
LIVE PREVIEW

Grap aphQL hQL forget (the) REST? Christian Schwendtner - - PowerPoint PPT Presentation

Nov 12, 2023 22 likes •484 views

Grap aphQL hQL forget (the) REST? Christian Schwendtner https://www.pexels.com/photo/man-person-people-emotions-1990/ https://www.pexels.com/photo/man-person-people-emotions-1990/ REST Feelings Im lovin it Well, What else?

slide-1
SLIDE 1

Grap aphQL hQL – forget (the) REST?

Christian Schwendtner

slide-2
SLIDE 2

https://www.pexels.com/photo/man-person-people-emotions-1990/

slide-3
SLIDE 3

https://www.pexels.com/photo/man-person-people-emotions-1990/

slide-4
SLIDE 4

REST – Feelings

I’m lovin’ it Well, … What else?

slide-5
SLIDE 5

Agenda

Let’s talk about REST Challenges Why What How GraphQL in Action GraphQL Features GraphQL on the Server GraphQL on the Client

slide-6
SLIDE 6

Let’s talk about REST

slide-7
SLIDE 7

https://www.pexels.com/photo/adult-casual-collection-fashion-296881/

slide-8
SLIDE 8

Richardson Maturity Model

https://martinfowler.com/articles/richardsonMaturityModel.html

Level 0: The Swamp of POX Level 1: Resources Level 2: HTTP Verbs Level 3: Hypermedia Controls Glory y of REST ST

slide-9
SLIDE 9

Challenges

slide-10
SLIDE 10

The BookStore aka “ Amazon (very) light”

Books

Algorithms to Live By Brian Christian Cracking the Coding Interview Gayle Laakmann McDowell Life 3.0 Max T egmark

Book Author

*

1

slide-11
SLIDE 11

Interaction

Books

Algorithms to Live By Brian Christian Cracking the Coding Interview Gayle Laakmann McDowell Life 3.0 Max T egmark GET /books

[ book: { title, …, authorURL } ]

GET /authors/1

{ firstName, lastName, … }

GET /authors/14

{ firstName, lastName, … }

GET /authors/98

{ firstName, lastName, … }

Server

slide-12
SLIDE 12
slide-13
SLIDE 13

https://www.pexels.com/photo/adult-alcohol-blur-celebrate-290316/ https://www.pexels.com/photo/time-lapse-photography-of-water-bobbling-beside-lemon-fruit-161425/

slide-14
SLIDE 14

“Custom Endpoints”?

GET /books_overview GET /books?dataset=books_with_authors GET /books?dataset=books_with_authors_with_ratings GET /books?dataset=books_with_authors_with_all_i_will_ever_need GET /books?dataset=books_with_authors_with_all_i_will_ever_need2

slide-15
SLIDE 15

“Custom Endpoints”

Multiple views? Multiple client types? Multiple client versions? Private / Public API GET /books?include=book.title,author.lastName,author.firstName

slide-16
SLIDE 16

GraphQL

A query language for your API

slide-17
SLIDE 17

Just st for once, ce, let t me me look k on you with th my my own n eyes es. . An Anakin kin Skywal ywalker er

https://pixabay.com/en/star-wars-warrior-space-cinema-2473201/

slide-18
SLIDE 18

GraphiQL

slide-19
SLIDE 19

GraphQL is …

Specification Reference implementation Schema (domain specific) Independent of the data store Independent of the transport protocol

slide-20
SLIDE 20

GraphQL Features

slide-21
SLIDE 21

GraphQL Operations

Query Read Mutation Write Subscription Notification (“Event”)

slide-22
SLIDE 22

Fields

query { books { title author { firstName lastName } } }

slide-23
SLIDE 23

Arguments

query { books(first: 2) { title author { firstName lastName } } }

slide-24
SLIDE 24

Aliases

query { books { title author { firstName lastName smallPic: profilePic(size: SMALL) largePic: profilePic(size: LARGE) } } }

slide-25
SLIDE 25

Fragments

fragment authorFragment on Author { firstName lastName } query { books { title author { ...authorFragment } } }

slide-26
SLIDE 26

Variables

query($limit: Int) { books(first: $limit) { title author { firstName lastName } } }

slide-27
SLIDE 27

Validation / Errors

slide-28
SLIDE 28

Introspection

slide-29
SLIDE 29

Mutations

mutation { voteBook(bookId: 1) { id votes } }

slide-30
SLIDE 30

May the force be with you

https://pixabay.com/en/star-wars-lightsaber-laser-sword-2369317/

slide-31
SLIDE 31

Schema

type Book { id: Int! title: String ... author: Author } type Author { id: Int! firstName: String lastName: String ... books: [Book] }

type Query { books(first: Int): [Book] authors: [Author] } type Mutation { voteBook(bookId: Int!): Book }

slide-32
SLIDE 32

GraphQL on the Server

slide-33
SLIDE 33

Resolvers

books() title() title() author

  • r { }

} author() author() “Algorithms …” firstName() lastName() query { books { title author { firstName lastName } } } “Cracking the ...” author

  • r { }

} “Brian”

“Gayle”

“Laak akmann mann” “Christian” [ b book1 k1 { } }, book2 k2 { } }, … ] firstName() lastName()

slide-34
SLIDE 34

Execution

query { books { title author { firstName lastName } } } db.getAllBooks() db.getAuthorForBook(1) db.getAuthorForBook(2) db.getAuthorForBook(3) db.getAuthorForBook(4) db.getAuthorForBook(5) db.getAuthorForBook(6) Caching Batching DataLoader

https://github.com/facebook/dataloader

slide-35
SLIDE 35

GraphQL on the Client

slide-36
SLIDE 36

Client

GET / POS OST Relay Client

https://facebook.github.io/relay https://www.apollographql.com/client

slide-37
SLIDE 37
slide-38
SLIDE 38

UI - Structure

Books

Algorithms to Live By Brian Christian Cracking the Coding Interview Gayle Laakmann McDowell Life 3.0 Max T egmark

<book-list> <book-info> <book-info> <author-info> <book-info> <author-info>

<author-info>

slide-39
SLIDE 39

Version 1

<book-list> query { books { title author { firstName lastName profilePic } } } <book-info> <author-info>

slide-40
SLIDE 40

Version 2

<book-list> query bookList { books { ...book } } <book-info> <author-info> fragment book

  • n Book {

title author { ...author } } fragment author

  • n Author {

firstName lastName profilePic }

slide-41
SLIDE 41

<author-info>

fragment author

  • n Author {

firstName lastName profilePic } export interface authorFragment = { firstName: string | null, lastName: string | null, profilePic: string | null, };

TypeScript

codegen

slide-42
SLIDE 42

https://www.pexels.com/photo/man-couple-people-woman-343/

REST vs GraphQL

slide-43
SLIDE 43

One last note: GraphQL as Gateway

Service A GraphQL Client Service B Service C

slide-44
SLIDE 44

GraphQL – REST in peace

https://www.pexels.com/photo/photo-of-a-hippie-woman-736603/

slide-45
SLIDE 45

Christian Schwendtner PROGRAMMIERFABRIK GmbH

@CSchwendtner

slide-46
SLIDE 46

https://www.pexels.com/photo/adult-chill-computer-connection-450271/