PractiQL GraphQL

Talk performed at AsyncJS meetup in Brighton on 3.12.2015

Transcript

1. PRACTIQL GRAPHQL
2. ABOUT ME Alexander Savin Web developer @ 
 Red Badger Skydiver
3. REACT LONDON MEETUP > 2000 members
5. GRAPHQL
6. REAL LIFE STORY
7. FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE D
8. FACEBOOK CASE
9. GRAPHQL
10. GRAPHQL SERVER
11. GRAPHQL SERVER GRAPHQL CLIENT
12. CLIENT 1.CREATES GRAPHQL QUERY STRING 2.SENDS IT TO THE SERVER
13. SERVER 1.PROCESSES GRAPHQL QUERY STRING 2.SENDS JSON RESPONSE
14. LANGUAGE FOR READ / WRITE ACTIONS
15. QUERIES
16. { user { name } }
17. { user { name } } { “user”: { “name”: “Alex Savin” } } GraphQL JSON
18. MUTATIONS
19. mutation AddUser { createUser(input: {first_name: "Alex" }) { } }
20. mutation AddUser { createUser(input: {first_name: "Alex" }) { changedUser { first_name } } }
21. QUERY ARGUMENTS
22. { user { name } }
23. { user(id: 123456) { name } }
24. NESTING
25. { user(id: 123456) { name friends { name } } }
26. { user(id: 123456) { name friends { name friends { name friends {…} } } } }
27. COMPOSITION
28. { user(id: 123456) { first_name last_name email twitter town homepage } }
29. { user(id: 123456) { …UserDetails } } fragment UserDetails on User { first_name last_name email twitter town homepage }
30. TYPE SYSTEM (SERVER)
31. type User { name: String id: String! }
32. type User { name: String id: String! } TYPE ROOT QUERY type Query { user(id: String!): User }
33. THAT’S ALL YOU NEED (time for live demo)
35. INTROSPECTION
36. { __schema { types { fields { name description } } } }
37. FEW IMPORTANT TAKEOUTS
38. DATA SHAPE EQUALITY What you request is what you get WYRIWYG
39. NO OVERFETCHING
40. SINGLE REQUEST / RESPONSE FOR A CLIENT
41. BACK TO REST
42. { "created_at": "2015-08-30T00:50:25.000+00:00", "genres": [], "id": "e66637db-13f9-4056-abef-f731f8b1a3c7", "like_count": 3, "liked_count": 3, "name": "Excuse me while I kiss these frets", "owner": { "avatar_url": "https://secure.gravatar.com/avatar/ 4ede0ad35bb796ea8f78861acc4372ca?s=300", "bio": null, "id": "b06e671a-b169-45e6-a645-74c31abca910", "login": "playlistrock",
43. { "created_at": "2015-08-30T00:50:25.000+00:00", "genres": [], "id": "e66637db-13f9-4056-abef-f731f8b1a3c7", "like_count": 3, "liked_count": 3, "name": "Excuse me while I kiss these frets", "owner": { "avatar_url": "https://secure.gravatar.com/avatar/4ede0ad35bb796ea8f78861acc4372ca?s=300", "bio": null, "id": "b06e671a-b169-45e6-a645-74c31abca910", "login": "playlistrock", "name": "Playlist Rock", "site_admin": false }, "published": false, "saved_count": 3, "tags": [ { "name": "Jimi Hendrix" }, { "name": "Jimmy Page" }, { "name": "Eric Clapton" }, … https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b
44. GRAPHQL IS A SPEC http://facebook.github.io/graphql/
45. EXPRESS GRAPHQL DEMO
46. RESOLVE {}
47. ASYNC RESOLVE {}
48. async resolve(obj, {...}) { const endpoints = [ { endpoint: 'voiceNumber', data: contactNumber }, { endpoint: 'smsNumber', data: contactNumber }, { endpoint: 'email', data: email }, ]; const processEndpoint = async ({endpoint, data}) => { try { return await contactService[endpoint](data); } catch (error) { return error; } }; const processes = [
49. const processes = [ for (process of endpoints) processEndpoint(process) ]; const responses = await* processes; const errors = responses.filter(response => response instanceof Error); if (errors.length) { throw errors; } return { accessToken, refreshToken, };
50. RELAY
52. REUSABLE SELF-CONTAINED COMPONENTS
53. myComponent\ index.js style.css test.js data?
54. OPTIMISTIC UPDATES ERROR HANDLING OPTIMAL DATA FETCHING
55. COMPONENTS DECLARE WHAT DATA THEY NEED
57. Relay with React Native Allows code re-usability across iOS and Android 87% in case of this app
58. GRAPHQL
59. GRAPHQL RELAY REACT FLUX
60. BACK TO OUR STORY
61. FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE D
62. FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE D GRAPHQL SERVER
63. FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE D GRAPHQL SERVER IOS ANDROID
64. FRONT END APP SERVICE A SERVICE C SERVICE B SERVICE D GRAPHQL SERVER IOS ANDROID FRONT END APP V2 IOS V2 ANDROID V2
65. FRONT END APP GRAPHQL SERVER IOS ANDROID FRONT END APP V2 IOS V2 ANDROID V2
66. THANKS
67. Alexander Savin @karismafilms Red Badger @redbadgerteam
68. REFERENCES • http://red-badger.com/blog/2015/08/28/give-it-5-days-facebook-relay-and-graphql/ • http://red-badger.com/blog/2015/07/09/graphql-and-the-open-movie-database-from- introspection-to-inception/ • https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b • https://www.youtube.com/watch?v=Ed6oJXKt3-M - Nick Schrock on GraphQL • http://graphql.org/ • https://www.reindex.io/ • http://radiobadger.com/posts/2015-11-05-episode-26.html