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
   

   View Slide

2. GraphQL Servers
   in the Client
   David Gomes
   London, March 9th 2018 @ ReactFest
   2
   

   View Slide

3. Why this talk?
   3
   

   View Slide

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!
   

   View Slide

5. 5
   So, we're building a fully client-side application…
   

   View Slide

6. Browser
   6
   

   View Slide

7. Browser Database
   (MemSQL)
   WebSocket
   7
   MySQL Protocol
   

   View Slide

8. 8
   software engineer
   ?
   

   View Slide

9. 9
   happy software
   engineer
   

   View Slide

10. 10
    JS GraphQL Clients
    really happy
    software engineer
    …
    

    View Slide

11. GraphQL and GraphQL Clients'
    Advantages
    11
    (applies mostly to React/component-based UI frameworks)
    

    View Slide

12. 12
    DECLARATIVE DECLARATIVE
    DECLARATIVE DECLARATIVE
    

    View Slide

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/
    

    View Slide

14. const Todo = ({ complete, text }) => (
    
    checked={complete}
    type="checkbox"
    />
    {text}
    
    );
    export default createFragmentContainer(Todo, grapqhl`
    fragment Todo_todo on Todo {
    complete
    text
    }
    `)
    14
    

    View Slide

15. 2. Expressive and very powerful
    language for querying data
    15
    

    View Slide

16. 3. Compile-time optimizations
    and validations
    16
    See https://facebook.github.io/relay/docs/en/compiler-architecture.html
    

    View Slide

17. 4. Miscellaneous (Graphiql, Graph
    Caching, Offline Persistence, …)
    17
    See https://facebook.github.io/relay/docs/en/thinking-in-graphql.html#caching-a-graph
    

    View Slide

18. WebSocket
    18
    Browser Database
    (MemSQL)
    WebSocket
    MySQL Protocol
    

    View Slide

19. Database
    WebSocket
    19
    Database
    (MemSQL)
    ?
    Browser
    MySQL Protocol
    

    View Slide

20. Browser
    TCP
    20
    HTTP/WS
    ?
    Database
    (MemSQL)
    MySQL Protocol
    

    View Slide

21. Browser
    WebSocket
    21
    Database
    (MemSQL)
    MySQL Protocol
    

    View Slide

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
    

    View Slide

23. {
    "tables": [
    {
    name: "customer",
    rowCount: 7204
    },
    …
    ]
    }
    {
    database(name: "tpch") {
    tables {
    name
    rowCount
    }
    }
    }
    23
    

    View Slide

24. Implementation
    24
    (the boring part of this talk)
    

    View Slide

25. Apollo Link
    25
    Apollo Client GraphQL Server
    Apollo
    Link
    View
    (e.g. React)
    

    View Slide

26. 26
    Web Workers
    

    View Slide

27. 27
    Web Workers
    

    View Slide

28. 28
    Database
    (MemSQL)
    WebSocket
    Main Thread Web Worker
    MySQL Protocol
    graphql.js server with
    a client-side schema
    

    View Slide

29. So?
    29
    

    View Slide

30. 30
    Database
    (MemSQL)
    WebSocket
    Main Thread Web Worker
    We removed GraphQL from the equation
    MySQL Protocol
    

    View Slide

31. We removed GraphQL from the equation
    31
    1. Static Typing + GraphQL don't play along very well
    for intra-process communication
    

    View Slide

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
    

    View Slide

33. We removed GraphQL from the equation
    33
    2. Our use case involves some amount of untyped
    data (arbitrary SQL Queries)
    

    View Slide

34. 34
    Database
    (MemSQL)
    WebSocket
    Main Thread Web Worker
    MySQL Protocol
    Our new architecture that I won't really get into…
    

    View Slide

35. Use Case Overview
    35
    

    View Slide

36. 1. Managing remote data in fully
    client-side applications
    36
    

    View Slide

37. 37
    Electron App
    File System
    github.com/davidgomes/london-file-explorer
    

    View Slide

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
    

    View Slide

39. 39
    Main Thread
    Pretend GraphQL
    Server built with
    graphql-anywhere
    

    View Slide

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
    

    View Slide

41. 41
    REST API
    HTTP Server
    Main Thread
    GraphQL Server*
    HTTP/WS
    * Could also be in a Web Worker
    

    View Slide

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
    

    View Slide

43. 5. Querying expensive data
    computed by a Web Worker?
    Querying IndexedDB?
    43
    Okay, we are probably stretching it here…
    

    View Slide

44. Key Takeaways
    44
    

    View Slide

45. 1. GraphQL is a very generic
    technology
    45
    I predict that we'll be seeing a lot more of it out there.
    

    View Slide

46. 2. Don't be afraid to get creative
    when designing an architecture
    46
    Go crazy out there…
    

    View Slide

47. 3. Is GraphQL overkill for some of
    these use cases?
    47
    Be careful out there…
    

    View Slide

48. 48
    memsql.com/careers
    We are building a distributed,
    high-performance SQL database.
    And we're hiring!
    

    View Slide

49. Thank you for listening!
    49
    @davidrfgomes
    @davidgomes
    david@memsql.com
    

    View Slide