GraphQL Servers in the Client

In this talk I speak about MemSQL's experience with using GraphQL for a fully client-side application. I share why we tried it and the pain points we hit. I then summarize and describe various ways in which GraphQL can be used on the client.

The goal is to explore GraphQL as a more generic tool than simply a REST API replacement. In the end I also caution as to why this could be a bad idea. As a community, we are still in an experimentation phase with new ways to use GraphQL.

Transcript

1. GraphQL Servers in the Browser David Gomes London, March 9th 2018 @ ReactFest 1
2. GraphQL Servers in the Client David Gomes London, March 9th 2018 @ ReactFest 2
3. Why this talk? 3
4. Why this talk? 4 1. 6 months ago, we (at MemSQL) explored a slightly unconventional use of GraphQL 2. Contribute to the discussion of GraphQL as a solution to different/new problems 3. Hope that all of this is useful to somebody else in the future!
5. 5 So, we're building a fully client-side application…
6. Browser 6
7. Browser Database (MemSQL) WebSocket 7 MySQL Protocol
8. 8 software engineer ?
9. 9 happy software engineer
10. 10 JS GraphQL Clients really happy software engineer …
11. GraphQL and GraphQL Clients' Advantages 11 (applies mostly to React/component-based UI frameworks)
12. 12 DECLARATIVE DECLARATIVE DECLARATIVE DECLARATIVE
13. 1. Fully declarative view 13 "No more action creators, async handling, and request waterfalls. Just ask for the data you need with a GraphQL query and it shows up." Source: https://www.apollographql.com/
14. const Todo = ({ complete, text }) => ( <div> <input checked={complete} type="checkbox" /> <label>{text}</label> </div> ); export default createFragmentContainer(Todo, grapqhl` fragment Todo_todo on Todo { complete text } `) 14
15. 2. Expressive and very powerful language for querying data 15
16. 3. Compile-time optimizations and validations 16 See https://facebook.github.io/relay/docs/en/compiler-architecture.html
17. 4. Miscellaneous (Graphiql, Graph Caching, Offline Persistence, …) 17 See https://facebook.github.io/relay/docs/en/thinking-in-graphql.html#caching-a-graph
18. WebSocket 18 Browser Database (MemSQL) WebSocket MySQL Protocol
19. Database WebSocket 19 Database (MemSQL) ? Browser MySQL Protocol
20. Browser TCP 20 HTTP/WS ? Database (MemSQL) MySQL Protocol
21. Browser WebSocket 21 Database (MemSQL) MySQL Protocol
22. mysql> SELECT table_name, table_rows FROM tables WHERE database_name="tpch"; +-------------------------+------------+ | table_name | table_rows | +-------------------------+------------+ | customer | 7204 | | lineitem | 17 | | nation | 124 | | orders | 150123 | | part | 4 | | partsupp | 5 | | q17_lineitem_tmp_cached | 17 | | region | 5 | | supplier | 29 | +-------------------------+------------+ 9 rows in set (0.37 sec) 22
23. { "tables": [ { name: "customer", rowCount: 7204 }, … ] } { database(name: "tpch") { tables { name rowCount } } } 23
24. Implementation 24 (the boring part of this talk)
25. Apollo Link 25 Apollo Client GraphQL Server Apollo Link View (e.g. React)
26. 26 Web Workers
27. 27 Web Workers
28. 28 Database (MemSQL) WebSocket Main Thread Web Worker MySQL Protocol graphql.js server with a client-side schema
29. So? 29
30. 30 Database (MemSQL) WebSocket Main Thread Web Worker We removed GraphQL from the equation MySQL Protocol
31. We removed GraphQL from the equation 31 1. Static Typing + GraphQL don't play along very well for intra-process communication
32. We removed GraphQL from the equation 32 1. Static Typing + GraphQL don't play along very well for intra-process communication Backend (Web Worker) GraphQL UI
33. We removed GraphQL from the equation 33 2. Our use case involves some amount of untyped data (arbitrary SQL Queries)
34. 34 Database (MemSQL) WebSocket Main Thread Web Worker MySQL Protocol Our new architecture that I won't really get into…
35. Use Case Overview 35
36. 1. Managing remote data in fully client-side applications 36
37. 37 Electron App File System github.com/davidgomes/london-file-explorer
38. 2. Managing local/view state with GraphQL 38 See these links: https://www.apollographql.com/docs/link/links/state.html https://www.youtube.com/watch?v=2RvRcnD8wHY by Sara Vieira https://www.youtube.com/watch?v=uhsFulxaVqc by Uri Goldshtein
39. 39 Main Thread Pretend GraphQL Server built with graphql-anywhere
40. 3. Interacting with "legacy" REST APIs 40 See these links: https://github.com/dacz/apollo-bridge-link https://medium.com/@dadc/using-graphql-client-with-rest-api-9 c332e5c8eb3 by David Cizek https://github.com/apollographql/apollo-link-rest
41. 41 REST API HTTP Server Main Thread GraphQL Server* HTTP/WS * Could also be in a Web Worker
42. 4. Serverless applications without a GraphQL API (e.g. Firebase) 42 See this article by Pierre Criulanscy: https://medium.com/@pierrecriulanscy/client-side-only-realtime- web-applications-with-firebase-graphql-and-apollo-client-2-0-960 6160f7cf8
43. 5. Querying expensive data computed by a Web Worker? Querying IndexedDB? 43 Okay, we are probably stretching it here…
44. Key Takeaways 44
45. 1. GraphQL is a very generic technology 45 I predict that we'll be seeing a lot more of it out there.
46. 2. Don't be afraid to get creative when designing an architecture 46 Go crazy out there…
47. 3. Is GraphQL overkill for some of these use cases? 47 Be careful out there…
48. 48 memsql.com/careers We are building a distributed, high-performance SQL database. And we're hiring!
49. Thank you for listening! 49 @davidrfgomes @davidgomes david@memsql.com