User interfaces often utilize components such as grids and tables to help users browse and understand data. Today’s large data sets require sophisticated capabilities to ensure users can effectively comprehend data while remaining flexible and responsive. Building this functionality is time consuming, has integration and maintenance risks, and worst of all, distracts developers from the task at hand -- actually building the app. View the slides from our latest webinar to learn how the web’s most powerful data grid and GraphQL can help you deliver advanced functionality with minimal effort. View the recording here: https://www.brighttalk.com/webcast/11505/276417

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

2. © 2017 Sencha Inc. • CONFIDENTIAL •
ExtReact is a library of 100+ React Components
• Grids
• Trees
• Charts
• Form Controls
• Layouts
• Animations
• D3 Visualizations
• more

3. © 2017 Sencha Inc. • CONFIDENTIAL •
What GraphQL is not
• Not a database query language
• Not specific to any type of database (SQL or NoSQL)
3

4. © 2017 Sencha Inc. • CONFIDENTIAL •
What is GraphQL?
✓A potential successor to REST
✓A more powerful way to request data from the server

5. © 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

6. © 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

7. © 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
8

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
Publisher
id
name
address
Book
id
title
publishDate
Author
id
firstName
lastName
Character
name
type

9. © 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A way to request only the data needed and nothing more
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
}
}
}

10. © 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• A strongly-typed API contract
11

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

12. © 2017 Sencha Inc. • CONFIDENTIAL •
What does GraphQL provide that REST does not?
• Operations beyond CRUD.
13

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

14. © 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"
}

15. © 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) {
id
author
title
}
}

16. © 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) {
id
author
title
publisher {
name
}
}
}

17. © 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) {
id
author
title
characters(type: "protagonist") {
name
}
}
}

18. © 2017 Sencha Inc. • CONFIDENTIAL •
Comparing REST and GraphQL: Updating a Book
REST
PATCH /books/1
body: returns:
{
"success": true
}
{
"publishDate": "2019-05-01"
}

19. © 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
}
}

20. © 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:

21. © 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

22. © 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
24
<Book>
<h1>{ title }</h1>
<p>{ description }</p>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

23. © 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
25
query {
book(id: 1) {
id
title
author
reviews {
...Review
}
}
}
<Book>
<h1>{ title }</h1>
<p>{ description }</p>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

24. © 2017 Sencha Inc. • CONFIDENTIAL •
GraphQL Fragments
26
fragment Review on Review {
creator {
name
}
rating
text
title
}
<Book>
<h1>{ title }</h1>
<p>{ description }</p>
<h2>Reviews</h2>
<Review/>
<Review/>
<Review/>
</Book>

25. © 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

26. © 2017 Sencha Inc. • CONFIDENTIAL •
https://github.com/sencha/graphql-techtalk