© 2017 Sencha Inc. • CONFIDENTIAL • Leveraging React and GraphQL Mark Brocato Engineering Director, Sencha @mockaroodev
Jan 23, 2018
© 2017 Sencha Inc. • CONFIDENTIAL •
Leveraging React and GraphQL
Mark Brocato
Engineering Director, Sencha
@mockaroodev
© 2017 Sencha Inc. • CONFIDENTIAL •
ExtReact is a library of 100+ React Components
• Grids
• Trees
• Charts
• Form Controls
• Layouts
• Animations
• D3 Visualizations
• more
© 2017 Sencha Inc. • CONFIDENTIAL •
What GraphQL is not
• Not a database query language
• Not specific to any type of database (SQL or NoSQL)
3
© 2017 Sencha Inc. • CONFIDENTIAL •
What is GraphQL?
✓A potential successor to REST
✓A more powerful way to request data from the server
© 2017 Sencha Inc. • CONFIDENTIAL •
What is REST
• An API convention that maps HTTP verbs and URLs to back end resources.
• Create – POST /books
• Read – GET /books/1
• Update – PATCH /books/1
• Delete – DELETE /books/1
5
© 2017 Sencha Inc. • CONFIDENTIAL •
REST and GraphQL similarities
Both REST and GraphQL…
• are ways to request data via AJAX.
• have resources with IDs.
• allow reading and writing of data.
• typically accept and return data in JSON format
6
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
8
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
9
Publisheridnameaddress
BookidtitlepublishDate
AuthoridfirstNamelastName
Characternametype
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
10
Publisheridnameaddress
BookidtitlepublishDate
AuthoridfirstNamelastName
Characternametype
query {book(id: 1) {
idtitlepublishDateauthor {
idfirstNamelastName
}publisher {
name}
}}
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A strongly-typed API contract
11
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A strongly-typed API contract
12
type Query {book(id: ID!): Book
}
type Mutation {updateBook(id: ID!, publishDate: String): MutationResult
}
type Book { id: ID!title: String!author: String!publishDate: Stringcharacters: [Character]
}
type Character { ... }type MutationResult { ... }
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• Operations beyond CRUD.
13
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• Operations beyond CRUD
14
REST
• Create – POST /books
• Read – GET /books/1
• Update – PATCH /books/1
• Delete – DELETE /books/1
mutation {whatever(foo: 'bar') {
result}
}
GraphQL
© 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Fetching a Book
REST
GET /books/1
returns:
{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter"
}
© 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Fetching a Book
GraphQL
GET /graphql
body: returns:
{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter"
}
query {book(id: 1) {
idauthortitle
}}
© 2017 Sencha Inc. • CONFIDENTIAL •
Fetching Nested Objects
GraphQL
GET /graphql
body: returns:
{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter”,"publisher": {
"name": "Penguin Random House"}
}
query {book(id: 1) {
idauthortitlepublisher {
name}
}}
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL: Advanced Fetching
GraphQL
GET /graphql
body: returns:
{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter”,"characters": [{
"name": "Daenerys Targaryen"}, {
"name": ”Aegon Targaryen"}]
}
query {book(id: 1) {
idauthortitlecharacters(type: "protagonist") {
name}
}}
© 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Updating a Book
REST
PATCH /books/1
body: returns:
{"success": true
}
{"publishDate": "2019-05-01"
}
© 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Updating a Book
GraphQL
POST /graphql
body: returns:
{"success": true
}
mutation {updateBook(id: 1, publishDate: "2019-05-01") {
success}
}
© 2017 Sencha Inc. • CONFIDENTIAL •
REST vs GraphQL: Server Implementation
app.get('/books/:id', (req, res) => {return Book.find({ id: req.params.id });
})
REST:
{Query: {
book: (root, { id }) => {return Book.find({ id })
}}
}
GraphQL:
© 2017 Sencha Inc. • CONFIDENTIAL •
What makes GraphQL a good fit for React?
• Gives components a way to declare their data dependencies
• Keeps components decoupled, modular, and reusable by maintaining encapsulation
• DRY
• Prevents waste
• Facilitates refactoring
23
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
24
<Book><h1>{ title }</h1><p>{ description }</p>
<h2>Reviews</h2><Review/><Review/><Review/>
</Book>
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
25
query {book(id: 1) {
idtitleauthorreviews {
...Review}
}}
<Book><h1>{ title }</h1><p>{ description }</p>
<h2>Reviews</h2><Review/><Review/><Review/>
</Book>
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
26
fragment Review on Review {creator {
name}ratingtexttitle
}
<Book><h1>{ title }</h1><p>{ description }</p>
<h2>Reviews</h2><Review/><Review/><Review/>
</Book>
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Libraries
Apollo
• Can be used with any framework, but
has react-specific integration
• Easy to get started
• Incrementally adoptable
• Explicit and easy to understand
27
Relay
• Only for React
• More work to get started
• Requires specific build tasks
• Convention over configuration
© 2017 Sencha Inc. • CONFIDENTIAL •
https://github.com/sencha/graphql-techtalk