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.

David Gomes

March 15, 2018
Tweet

More Decks by David Gomes

Other Decks in Technology

Transcript

  1. 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!
  2. 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/
  3. 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
  4. 4. Miscellaneous (Graphiql, Graph Caching, Offline Persistence, …) 17 See

    https://facebook.github.io/relay/docs/en/thinking-in-graphql.html#caching-a-graph
  5. 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
  6. { "tables": [ { name: "customer", rowCount: 7204 }, …

    ] } { database(name: "tpch") { tables { name rowCount } } } 23
  7. 28 Database (MemSQL) WebSocket Main Thread Web Worker MySQL Protocol

    graphql.js server with a client-side schema
  8. 30 Database (MemSQL) WebSocket Main Thread Web Worker We removed

    GraphQL from the equation MySQL Protocol
  9. We removed GraphQL from the equation 31 1. Static Typing

    + GraphQL don't play along very well for intra-process communication
  10. 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
  11. We removed GraphQL from the equation 33 2. Our use

    case involves some amount of untyped data (arbitrary SQL Queries)
  12. 34 Database (MemSQL) WebSocket Main Thread Web Worker MySQL Protocol

    Our new architecture that I won't really get into…
  13. 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
  14. 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
  15. 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
  16. 5. Querying expensive data computed by a Web Worker? Querying

    IndexedDB? 43 Okay, we are probably stretching it here…
  17. 1. GraphQL is a very generic technology 45 I predict

    that we'll be seeing a lot more of it out there.
  18. 2. Don't be afraid to get creative when designing an

    architecture 46 Go crazy out there…