Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL Servers in the Client

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.

3ddabd219208d1fbc6f5b003144ca673?s=128

David Gomes

March 15, 2018
Tweet

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