GraphQL with React - The Revelations

A personal walkthrough on understanding and demystifying GraphQL and its actual purposes for web applications. This presentation touches on both the server0-side of GraphQL but also on the client-side via Apollo.

Transcript

1. GraphQL with React - The Revelations Olivier Robert November 29th 2017
2. Intro So far I had a basic understanding of what GraphQL is: ◦ Single endpoint to process all requests: host:port/graphql ◦ All requests are sent via POST ◦ Queries define what can be queried (READ) ◦ Mutations define how to do modify data (CREATE/UPDATE/DELETE) ◦ Schemas defines the data models and attributes ◦ GraphQL has its own GUI tool called GraphiQL ◦ Each component can requests only the data it required
3. Intro … but did not fully understand the benefits and whys
4. Then I worked on a project with GraphQL and : I finally get it!
5. Revelation #1 GraphQL can be an abstraction layer on top of multiple backends React UI REST API GraphQL DB S3 Web Client Application it’s does not necessarily replace REST APIs
6. Revelation #1 Definition of resolvers per queries FETCH FROM DB FETCH FROM REST API FETCH FROM STATIC JSON
7. Revelation #2 Apollo removes a lots of ... ...wait , what is Apollo?
8. Revelation #2 (interlude - Apollo) Apollo Client is: • A community-driven GraphQL client library (vs Facebook Relay) • Works with React, Vue, Ember and Angular • Provides Apollo-Client and Apollo-Provider • Browser and SSR ready • Main jobs are to: ◦ Sends all requests to host:port/graphql ◦ Parse responses according GraphQL Object Types ◦ Populate the data store ⇒ The GraphQL API server requires another lib e.g. gem graphql (ruby), apollo-server or express-graphql (node.js)
9. Revelation #2 Apollo removes a lots of manual and repetitive Redux setup: • Each stateful component can define its GraphQL query • Apollo binds it via a High Order Component (HOC)
10. Revelation #2 Apollo exposes the request as a component prop named data with tons of nifty attributes and callbacks: ◦ data.loading ◦ data.error ◦ data.refetch() ◦ … ◦ data.REPLACE_WITH_QUERY_TYPE: contains the queried info e.g. data.locations
11. Revelation #2 Without Apollo… well there are many steps required Stateful Component DATA_FETCH DATA_IS_FETCHING DATA_FETCH_SUCCESS DATA_FETCH_FAILURE EVENTS fetchData() dataIsFetching() fetchDataSucces() fetchDataFailure() ACTION DATA_FETCH DATA_IS_FETCHING DATA_FETCH_SUCCESS DATA_FETCH_FAILURE REDUCER
12. Revelation #3 Apollo provide its own cache storage Store and normalize all data fetched “(...)splitting the result into individual objects, creating a unique identifier for each object (using id and type), and storing those objects in a flattened data structure” ⇒ Similar libraries to ember-data that’s hard but doable by yourself
13. Mechanism to fetch data from the cache and/or from the remote service the data has not been cached yet Revelation #3 that’s insanely hard to do by yourself
14. Conclusions • I did not cover all powerful features of Apollo: ◦ Centralized error handling ◦ Automated splitting of large queries into multiple smaller async requests ◦ … ⇒ Check Apollo for React • Pros: ◦ Development productivity gain ◦ Solves data fetching/updates for the view layer ◦ Setup is straightforward with Apollo with a rather small footprint • BUT some concerns: ◦ Loss of visibility and control as everything happens “auto-magically” ◦ Beware not to place business logic into the view layer/components
15. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com