GraphQL Tokyo meetup 9 発表資料 https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/266668493/

1. How I made a realtime
web app using GraphQL
and Ruby on Rails
@tompng
pen
(Tomoya Ishida)

2. Who am I?
•Work at codeTakt
•Making
•Love tricky code

4. I ve commented
to your work
please reload
I ve done my work
please reload
I sent you a new document,
please reload

5. reload
I sent another something.
please reload again.
reload
reload
reload

6. network
network
wifi
wifi

7. GraphQL & Realtime
• Required data varies over pages and releases
• Almost every data should be realtime
• Feature that would be added in the future
should also be realtime

8. Needs a library
…
or make it

9. github.com/tompng/ar_sync
(ActiveRecord JavaScript Sync)
gem ar_sync

12. Subscribe keys by websocket, actioncable(rails), etc
subscribe key for normal changes
for user-specific changes
(ex: comment.myReaction, user.isFriend)

13. Rails side
Define parent & child relation

14. Rails side
created a reaction to comment 10 with id=123
notification { add reaction 123 } to comment 10
Use ActiveRecord s database commit callbacks

15. Rails side
Use ActiveRecord s database commit callbacks
kind changed → comment.reactionSummary changes
notification { update reactionSummary } to comment 10

16. Rails side
comment_id changed from 10 to 20 → parent is changed
notification { remove reaction id=123 } to comment 10
notification { add reaction id=123 } to comment 20
Use ActiveRecord s database commit callbacks

17. event { add id: 10 } came to "d17e3f62/reactions"
1. fetch
2. add
3. subscribe new keys
+

18. Sample App
with Rails, React, TypeScript

22. Why?
• I didn t need to write GraphQL query parser
• To provide type support
wrote a parser later, respond to introspection query, to use GraphiQL

23. Generated Types

24. Query Type
(passed to function)
Generated Types
（generate once)
Response Type
TypeScript
type programming

25. Compile Error
If you forgot to add

26. ar_sync_sampleapp

27. ar_sync_sampleapp

28. ar_sync_sampleapp

29. ar_sync_sampleapp

30. with ar_sync
•Write less code, and your existing Rails
app will be realtime
•Mutation, REST, Batch, all OK
•Type support