leveraging react and graphql to create a performant, scalable data grid
TRANSCRIPT
![Page 1: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/1.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
Leveraging React and GraphQL
Mark Brocato
Engineering Director, Sencha
@mockaroodev
![Page 2: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/2.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
ExtReact is a library of 100+ React Components
• Grids
• Trees
• Charts
• Form Controls
• Layouts
• Animations
• D3 Visualizations
• more
![Page 3: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/3.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
What GraphQL is not
• Not a database query language
• Not specific to any type of database (SQL or NoSQL)
3
![Page 4: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/4.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
What is GraphQL?
✓A potential successor to REST
✓A more powerful way to request data from the server
![Page 5: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/5.jpg)
© 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
![Page 6: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/6.jpg)
© 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
![Page 7: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/7.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
8
![Page 8: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/8.jpg)
© 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
![Page 9: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/9.jpg)
© 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}
}}
![Page 10: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/10.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A strongly-typed API contract
11
![Page 11: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/11.jpg)
© 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 { ... }
![Page 12: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/12.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• Operations beyond CRUD.
13
![Page 13: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/13.jpg)
© 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
![Page 14: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/14.jpg)
© 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"
}
![Page 15: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/15.jpg)
© 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
}}
![Page 16: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/16.jpg)
© 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}
}}
![Page 17: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/17.jpg)
© 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}
}}
![Page 18: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/18.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Updating a Book
REST
PATCH /books/1
body: returns:
{"success": true
}
{"publishDate": "2019-05-01"
}
![Page 19: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/19.jpg)
© 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}
}
![Page 20: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/20.jpg)
© 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:
![Page 21: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/21.jpg)
© 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
![Page 22: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/22.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
24
<Book><h1>{ title }</h1><p>{ description }</p>
<h2>Reviews</h2><Review/><Review/><Review/>
</Book>
![Page 23: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/23.jpg)
© 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>
![Page 24: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/24.jpg)
© 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>
![Page 25: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/25.jpg)
© 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
![Page 26: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid](https://reader033.vdocuments.us/reader033/viewer/2022051710/5a66ed257f8b9a91298b4ad7/html5/thumbnails/26.jpg)
© 2017 Sencha Inc. • CONFIDENTIAL •
https://github.com/sencha/graphql-techtalk