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

  • Published on
    23-Jan-2018

  • View
    156

  • Download
    2

Transcript

  • © 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 Publisher id name address Book id title publishDate Author id firstName lastName Character name type
  • © 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 } } }
  • © 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: String characters: [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) { id author title } }
  • © 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 } } }
  • © 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 } } }
  • © 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 { title } { description } Reviews
  • © 2017 Sencha Inc. • CONFIDENTIAL • GraphQL Fragments 25 query { book(id: 1) { id title author reviews { ...Review } } } { title } { description } Reviews
  • © 2017 Sencha Inc. • CONFIDENTIAL • GraphQL Fragments 26 fragment Review on Review { creator { name } rating text title } { title } { description } Reviews
  • © 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