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

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 I’m lovin ’ it Well, … What else?

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

Let’s talk about REST

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

Richardson Maturity Model Glory y of REST ST Level 3: Hypermedia Controls Level 2: HTTP Verbs Level 1: Resources Level 0: The Swamp of POX https://martinfowler.com/articles/richardsonMaturityModel.html

Challenges

The BookStore aka “ Amazon (very) light” Books Algorithms to Live By Brian Christian * 1 Book Author Cracking the Coding Interview Gayle Laakmann McDowell Life 3.0 Max T egmark

Interaction GET /books Books [ book: { title, …, authorURL } ] Algorithms to Live By GET /authors/1 Brian Christian { firstName, lastName , … } Cracking the Coding Interview Server GET /authors/14 Gayle Laakmann McDowell { firstName, lastName , … } Life 3.0 GET /authors/98 Max T egmark { firstName, lastName , … }

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/

“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

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

GraphQL A query language for your API

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/

Graph i QL

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

GraphQL Features

GraphQL Operations Query Read Mutation Write Subscription Notification (“Event”)

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

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

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

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

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

Validation / Errors

Introspection

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

May the force be with you https://pixabay.com/en/star-wars-lightsaber-laser-sword-2369317/

Schema type Book { type Query { id: Int! books(first: Int): [Book] title: String authors: [Author] ... } author: Author } type Mutation { type Author { voteBook(bookId: Int!): Book id: Int! } firstName: String lastName: String ... books: [Book] }

GraphQL on the Server

Resolvers books() query { books { }, … ] [ b book1 k1 { } }, book2 k2 { } title title() title() author() author() author { “Algorithms …” author or { } } author or { } } “Cracking the ...” firstName lastName firstName() lastName() firstName() lastName() } } “Gayle” “Brian” “Christian” “ Laak akmann mann ” }

Execution query { books { db.getAllBooks() title author { db.getAuthorForBook(1) firstName db.getAuthorForBook(2) Caching lastName db.getAuthorForBook(3) Batching } db.getAuthorForBook(4) } db.getAuthorForBook(5) DataLoader } db.getAuthorForBook(6) https://github.com/facebook/dataloader

GraphQL on the Client

Client GET / POS OST Relay https://facebook.github.io/relay Client https://www.apollographql.com/client

UI - Structure Books <book-list> <book-info> Algorithms to Live By Brian Christian < author-info > Cracking the Coding Interview <book-info> Gayle Laakmann McDowell <author-info> <book-info> Life 3.0 <author-info> Max T egmark

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

Version 2 <book-list> query bookList { <book-info> books { ...book fragment book <author-info> on Book { } title } fragment author on Author { author { firstName ...author lastName } profilePic } }

<author-info> TypeScript fragment author export interface author Fragment = { on Author { firstName: string | null, firstName lastName: string | null, codegen lastName profilePic: string | null, profilePic }; }

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

One last note: GraphQL as Gateway Client GraphQL Service A Service B Service C

GraphQL – REST in peace https://www.pexels.com/photo/photo-of-a-hippie-woman-736603/

Christian Schwendtner PROGRAMMIERFABRIK GmbH @CSchwendtner

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