Data Management with GraphQL

Transcript

1. GRAPHQL DATA MANAGEMENT
2. DATA MANAGEMENT WITH GRAPHQL TODAY ▸ GraphQL Intro ▸ Data APIs ▸ Demo ▸ UI / UX Development ▸ Resources
3. DATA MANAGEMENT WITH GRAPHQL CUSTOMER http://graphql.org/ … AND MORE …
4. DATA MANAGEMENT WITH GRAPHQL A UNIFIED DATA API! CONSUMERS API GATEWAY DATA SOURCES
5. DATA MANAGEMENT WITH GRAPHQL GRAPHQL ▸ Specification ▸ Language/Tech-Stack agnostic ▸ Strongly Typed Query Language ▸ API-Gateway / Backend-for-Frontends ▸ Great Developer Tools ▸ Uniform API without data source limits ▸ Consumer-Driven API Queries over HTTP(S)
6. DATA MANAGEMENT WITH GRAPHQL „A QUERY LANGUAGE FOR YOUR API“ GRAPHQL QUERY HTTP POST 200 JSON RESPONSE DATA
7. DATA MANAGEMENT WITH GRAPHQL DATA? String: id Float : price String: location String: from String: datetime String: class Object: details { "id": "1", "price": 100.5, "location": "MUC", "from": "BER", "datetime": "1507368559535", "class": "Eco", "details": null } STRUCTURE TYPES RELATIONS VALUES
8. DATA MANAGEMENT WITH GRAPHQL RESTFUL APIS [ { "id": "1", "price": 100.5, "location": "MUC", "from": "BER", "datetime": "1507368559535", "class": "Eco", "details": null }, { "id": "2", "price": 50.56, "location": "BER", "from": "MUC", "datetime": "1507368559535", "class": "Business", "details": null } ] /flights COLLECTIONS
9. DATA MANAGEMENT WITH GRAPHQL RESTFUL APIS { "id": "2", "price": 50.56, "location": "BER", "from": "MUC", "datetime": "1507368559535", "class": "Business", "details": null } /flights/2 OBJECTS
10. DATA MANAGEMENT WITH GRAPHQL RESTFUL /flights/2/details /flights-with-details/2 PROBLEM: N+1 QUERY PROBLEM: OVER-/UNDER-FETCHING { "id": "2", "price": 50.56, "location": "BER", "from": "MUC", "datetime": "1507368559535", "class": "Business", "details": { "flightNo": "AB1234" } } RELATIONS
11. DATA MANAGEMENT WITH GRAPHQL ODATA (V1-4) /flights/2?include=id,price,details { "id": "2", "price": 50.56, "details": { "flightNo": "AB1234" "capacity": { seats: "102" } } } PROBLEM: RELATION DEPTH PROBLEM: RELATION PARAMETERS 3RD/X LEVEL RELATIONS
12. DATA MANAGEMENT WITH GRAPHQL GRAPHQL query FlightById { flight(id: "1") { price location from class details { capacity { seats } } } } NO OVER- / UNDER- FETCHING N-DEPTH RELATION QUERIES RELATION PARAMETERS QUERY MODIFIER (DIRECTIVES) @FILTER, @SKIP, @TAKE, @CUSTOM SINGLE ROUNDTRIP BATCH/BULK QUERY/MUTATION ETC. …
13. DATA MANAGEMENT WITH GRAPHQL APIS RESTful OData GraphQL Queries Good Better Great Mutations Good Good Great Subscription Feed/Poll Feed/Poll Pub/Sub Specs N/A Good Great Docs Good Better Great Versioning Yes Yes No
14. DATA MANAGEMENT WITH GRAPHQL GRAPHQL TYPES ▸ String ▸ Int ▸ Bool ▸ ID ▸ Float ▸ Scalar ▸ Type ▸ Enum ▸ Interface ▸ Union ▸ Input ▸ Nullable ▸ Non-Nullable ▸ List of Nullable ▸ Non-Null List of Nullable ▸ Non-Null List of Non-Nullable SCALARS DEFINITION MODIFIER
15. DATA MANAGEMENT WITH GRAPHQL SCHEMA DEFINITION LANGUAGE # Represents a flight to booking a trip type Flight { id: ID location: Location connection: Flight price: Float from: Location datetime: String class: String details: JSON } type Query { flight(id: ID!): Flight flights: [Flight] } UNIFIED DECLARATIVE MODEL DESCRIPTION
16. DATA MANAGEMENT WITH GRAPHQL QUERIES query FlightById { flight(id: "1") { price location from class } } { "price": 100.5, "location": "MUC", "from": "BER", "class": „Eco", } FLEXIBLE AND DYNAMIC CONSUMER-DRIVEN OPTIONAL PERSISTEND
17. DATA MANAGEMENT WITH GRAPHQL QUERY VARIABLES query flightById($id: ID!) { flight(id: $id) { price location from class } } { "price": 100.5, "location": "MUC", "from": "BER", "class": "Eco", } { "id": "2" } JSON INTERACTIVE QUERIES
18. DATA MANAGEMENT WITH GRAPHQL MUTATIONS mutation startTrip { createTrip { id } } { "data": { "createTrip": { "id": "8I8Ux" } } } STATE CHANGES RPC APPROACH
19. DATA MANAGEMENT WITH GRAPHQL GRAPHIQL
20. DATA MANAGEMENT WITH GRAPHQL CLIENT - CURL curl -XPOST http://localhost:3000/graphql \ -H 'Authorization: Bearer YOUR_AUTH_TOKEN' \ -H 'Content-Type:application/json' \ -d '{"query":"query all { flights { id location price class} }“}' { "data": { "flights": [ { "id": "1", "location": "MUC", "price": 100.5, "class": "Eco" }, { "id": "2", "location": "BER", "price": 50.56, "class": "Business" } ] } }
21. DATA MANAGEMENT WITH GRAPHQL CLIENT - HTTP FETCH fetch('http://localhost:3000/graphql', { method: 'post', timeout: 1000, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_AUTH_TOKEN', }, body: '{"query":"query all { flights { id location price class} }"}', }) .then(response => response.json())
22. DATA MANAGEMENT WITH GRAPHQL CLIENTS - REACT ▸ Apollo ▸ (Modern) Relay ▸ etc. …
23. DATA MANAGEMENT WITH GRAPHQL SUBSCRIPTIONS Channels Resolver Event Stream Subscribe + GraphQL Query WEBSOCKETS HTTP EVENTSOURCE … QUERYABLE DATA SOURCES PUBLISH/SUBSCRIBE DATA SOURCES
24. DATA MANAGEMENT WITH GRAPHQL SUBSCRIPTIONS type Subscription { # Subscript to booking completed events onBookingCompleted: Reservation } ... { "data": { "bookTrip": { "id": "ZAvLr", "trip": { "id": "mTC6N", "flight": { "price": 50.56 } }, "payment": "VISA", "domainError": null } } } ... JSON Event Stream Schema mutation reservationWithPubSub { bookTrip(...) @publish(channelName:"reservationCompleted", payload: {}) { id } } EVENT-DRIVEN APPROACH
25. DATA MANAGEMENT WITH GRAPHQL DIRECTIVES query mockSomthing { flight(id: "1") { id price @mock(value: "200.9") } } { "data": { "flight": { "id": "1", "price": 200.9 } } } FLEXIBLE EXTENSIONS / PLUGINS CLIENT-SIDE (PER QUERY) SERVER-SIDE (SDL)
26. DATA MANAGEMENT WITH GRAPHQL DATA-DRIVEN APPS DEMO
27. DATA MANAGEMENT WITH GRAPHQL DATA-DRIVEN APPS SEARCH LOOKUP LIST PAGING FILTER … CRUD PROCESS VALIDATION …
28. DATA MANAGEMENT WITH GRAPHQL DATA-MODEL SIMILAR TO ENTITY-RELATIONSHIP-DIAGRAM
29. DATA MANAGEMENT WITH GRAPHQL STORYBOARD https://triboo.cloud.dropstack.run
30. DATA MANAGEMENT WITH GRAPHQL UI/UX DEVELOPMENT
31. DATA MANAGEMENT WITH GRAPHQL APOLLO $ npm install react-apollo apollo-client —save ▸ Easy to integrate and migrate into existing Apps ▸ Data Fetching and Caching abstraction ▸ ApolloProvider & Redux-Store Integration ▸ Wrapping to Higher-Order-Components ▸ Provides ReactJS Server-Side-Rendering ▸ ReactJS, React Native, AngularJS, VanillaJS, iOS, Android, etc. V1
32. DATA MANAGEMENT WITH GRAPHQL APOLLO SETUP import { ApolloClient, createNetworkInterface, ApolloProvider } from 'react-apollo' const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' }) const client = new ApolloClient({ networkInterface: networkInterface }) ReactDOM.render( <ApolloProvider client={client}> <MyAppComponent /> </ApolloProvider>, document.getElementById('root') ) V1
33. DATA MANAGEMENT WITH GRAPHQL APOLLO HOC import React from 'react' import {gql, graphql} from 'react-apollo' export const LocationsList = ({className, data: {allLocations}}) => { return ( <div className={className}> { allLocations && allLocations.map((x, i) => <span key={i}>{x}</span>) } </div> ) } export default graphql(gql` query allLocations { locations } `)(LocationsList) V1
34. DATA MANAGEMENT WITH GRAPHQL THANK YOU! QUESTIONS SOFTWARE ENGINEER
 // FREELANCER // WORKSHOPS @MIKEBILD @MIKEBILD ASK ME ABOUT GRAPHQL
35. DATA MANAGEMENT WITH GRAPHQL RESOURCES ▸ GraphQL http://graphql.org/ ▸ Apollo http://dev.apollodata.com/ ▸ ReactJS https://reactjs.org/ ▸ Specification http://facebook.github.io/graphql/October2016/ ▸ GraphQL Reference Impl. https://github.com/graphql/graphql-js ▸ SubKit GraphQL-Server https://github.com/codecommission/subkit ▸ Trip Bookers Example https://github.com/codecommission/subkit-examples ▸ GraphQL-as-a-Service https://www.graph.cool/