GraphQL Servers
in the Browser
David Gomes
London, March 9th 2018 @ ReactFest
1
Slide 2
Slide 2 text
GraphQL Servers
in the Client
David Gomes
London, March 9th 2018 @ ReactFest
2
Slide 3
Slide 3 text
Why this talk?
3
Slide 4
Slide 4 text
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!
Slide 5
Slide 5 text
5
So, we're building a fully client-side application…
Slide 6
Slide 6 text
Browser
6
Slide 7
Slide 7 text
Browser Database
(MemSQL)
WebSocket
7
MySQL Protocol
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/
Slide 14
Slide 14 text
const Todo = ({ complete, text }) => (
{text}
);
export default createFragmentContainer(Todo, grapqhl`
fragment Todo_todo on Todo {
complete
text
}
`)
14
Slide 15
Slide 15 text
2. Expressive and very powerful
language for querying data
15
Slide 16
Slide 16 text
3. Compile-time optimizations
and validations
16
See https://facebook.github.io/relay/docs/en/compiler-architecture.html
Apollo Link
25
Apollo Client GraphQL Server
Apollo
Link
View
(e.g. React)
Slide 26
Slide 26 text
26
Web Workers
Slide 27
Slide 27 text
27
Web Workers
Slide 28
Slide 28 text
28
Database
(MemSQL)
WebSocket
Main Thread Web Worker
MySQL Protocol
graphql.js server with
a client-side schema
Slide 29
Slide 29 text
So?
29
Slide 30
Slide 30 text
30
Database
(MemSQL)
WebSocket
Main Thread Web Worker
We removed GraphQL from the equation
MySQL Protocol
Slide 31
Slide 31 text
We removed GraphQL from the equation
31
1. Static Typing + GraphQL don't play along very well
for intra-process communication
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
We removed GraphQL from the equation
33
2. Our use case involves some amount of untyped
data (arbitrary SQL Queries)
Slide 34
Slide 34 text
34
Database
(MemSQL)
WebSocket
Main Thread Web Worker
MySQL Protocol
Our new architecture that I won't really get into…
Slide 35
Slide 35 text
Use Case Overview
35
Slide 36
Slide 36 text
1. Managing remote data in fully
client-side applications
36
Slide 37
Slide 37 text
37
Electron App
File System
github.com/davidgomes/london-file-explorer
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
39
Main Thread
Pretend GraphQL
Server built with
graphql-anywhere
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
41
REST API
HTTP Server
Main Thread
GraphQL Server*
HTTP/WS
* Could also be in a Web Worker
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
5. Querying expensive data
computed by a Web Worker?
Querying IndexedDB?
43
Okay, we are probably stretching it here…
Slide 44
Slide 44 text
Key Takeaways
44
Slide 45
Slide 45 text
1. GraphQL is a very generic
technology
45
I predict that we'll be seeing a lot more of it out there.
Slide 46
Slide 46 text
2. Don't be afraid to get creative
when designing an architecture
46
Go crazy out there…
Slide 47
Slide 47 text
3. Is GraphQL overkill for some of
these use cases?
47
Be careful out there…
Slide 48
Slide 48 text
48
memsql.com/careers
We are building a distributed,
high-performance SQL database.
And we're hiring!
Slide 49
Slide 49 text
Thank you for listening!
49
@davidrfgomes
@davidgomes
[email protected]