Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •
Leveraging React and GraphQL
Mark Brocato
Engineering Director, Sencha
@mockaroodev

ExtReact is a library of 100+ React Components
• Grids
• Trees
• Charts
• Form Controls
• Layouts
• Animations
• D3 Visualizations
• more

What GraphQL is not
• Not a database query language
• Not specific to any type of database (SQL or NoSQL)
3

What is GraphQL?
✓A potential successor to REST
✓A more powerful way to request data from the server

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

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

What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
8

9
Publisher
id
name
address
Book
id
title
publishDate
Author
id
firstName
lastName
Character
name
type

10
Publisher
id
name
address
Book
id
title
publishDate
Author
id
firstName
lastName
Character
name
type
query {
book(id: 1) {
id
title
publishDate
author {
id
firstName
lastName
}
publisher {
name
}
}
}

• A strongly-typed API contract
11

• 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: String
characters: [Character]
}
type Character { ... }
type MutationResult { ... }

• Operations beyond CRUD.
13

• 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

Comparing REST and GraphQL: Fetching a Book
REST
GET /books/1
returns:
{
"id": 1,
"author": "George R. R. Martin",
"title": "The Winds of Winter"
}

Comparing REST and GraphQL: Fetching a Book
GraphQL
GET /graphql
body: returns:
{
"id": 1,
"title": "The Winds of Winter"
}
query {
book(id: 1) {
id
author
title
}
}

Fetching Nested Objects
GraphQL
GET /graphql
body: returns:
{
"id": 1,
"title": "The Winds of Winter”,
"publisher": {
"name": "Penguin Random House"
}
}
query {
book(id: 1) {
id
author
title
publisher {
name
}
}
}

GraphQL: Advanced Fetching
GraphQL
GET /graphql
body: returns:
{
"id": 1,
"title": "The Winds of Winter”,
"characters": [{
"name": "Daenerys Targaryen"
}, {
"name": ”Aegon Targaryen"
}]
}
query {
book(id: 1) {
id
author
title
characters(type: "protagonist") {
name
}
}
}

Comparing REST and GraphQL: Updating a Book
REST
PATCH /books/1
body: returns:
{
"success": true
}
{
"publishDate": "2019-05-01"
}

Comparing REST and GraphQL: Updating a Book
GraphQL
POST /graphql
body: returns:
{
"success": true
}
mutation {
updateBook(id: 1, publishDate: "2019-05-01") {
success
}
}

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:

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

GraphQL Fragments
24
<Book>
<h1>{ title }</h1>
<p>{ description }</p>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

GraphQL Fragments
25
query {
book(id: 1) {
id
title
author
reviews {
...Review
}
}
}
<Book>
<h1>{ title }</h1>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

GraphQL Fragments
26
fragment Review on Review {
creator {
name
}
rating
text
title
}
<Book>
<h1>{ title }</h1>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

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

https://github.com/sencha/graphql-techtalk

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Semelhante a Leveraging React and GraphQL to Create a Performant, Scalable Data Grid (20)

Mais de Sencha

Mais de Sencha (11)

Último

Último (20)

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid