Slides are presented at GraphQL Summit 2019

1. www.openweb.nl
Expose your Kafka with
GraphQL
How to build a frontend on an event based backend

2. www.openweb.nl
Gerard Klijs
3 years
some months
7+ years
4 years ago
1.5 years ago
3.5 years ago

3. www.openweb.nl
Overview
▰ Short introduction Kafka
▰ Demo project setup
▰ GraphQL interactions
▰ Demo
▰ Production ready?

4. www.openweb.nl
Kafka

5. www.openweb.nl
Kafka

6. www.openweb.nl
Kafka
?

7. www.openweb.nl
Kafka

8. www.openweb.nl
Micro services

9. www.openweb.nl
Demo project: overview

10. www.openweb.nl
Demo project: topics
"commands"
"account_creation_feedback"
"money_transfer_feedback"
"balance_changed"
[24 3 [:ConfirmAccountCreation :ConfirmMoneyTransfer] {:retention.ms -1}]
[24 3 [:AccountCreationConfirmed :AccountCreationFailed] {:retention.ms -1}]
[24 3 [:MoneyTransferConfirmed :MoneyTransferFailed] {:retention.ms -1}]
[24 3 [:BalanceChanged] {:retention.ms -1}]

11. www.openweb.nl
Lacinia

12. www.openweb.nl
Lacinia

13. www.openweb.nl
Query: extract data from derived state

14. www.openweb.nl
Query: extract data from derived state
query {
transactions_by_iban (
iban: “NL66OPEN0000000000”
max_items: 2) {
id
changed_by
}
}

15. www.openweb.nl
Query: extract data from derived state
query {
transactions_by_iban (
iban: “NL66OPEN0000000000”
max_items: 2) {
id
changed_by
}
}
{
“data”: {
“transactions_by_iban”: [
{ “id”: 27,
“changed_by” : “€12,34”},
{ “id”: 24,
“changed_by” : “€20,00”}
]
}
}

16. www.openweb.nl
Transaction service: component overview

17. www.openweb.nl
Subscription: filter stream of events

18. www.openweb.nl
Subscription: filter stream of events
subscription {
stream_transactions(
iban: “NL66OPEN0000000000”) {
id
changed_by
descr
}
}

19. www.openweb.nl
Subscription: filter stream of events
subscription {
stream_transactions(
iban: “NL66OPEN0000000000”) {
id
changed_by
descr
}
}
{
“stream_transactions”: {
“id”: 33,
“changed_by”: “€74,59”,
“descr”: “after query”
}
}

20. www.openweb.nl
Subscription: command, return reaction(s)

21. www.openweb.nl
Subscription: command, return reaction(s)
subscription {
get_account(
username: “gklijs”,
password: “test1234”) {
iban
token
}
}

22. www.openweb.nl
Subscription: command, return reaction(s)
subscription {
get_account(
username: “gklijs”,
password: “test1234”) {
iban
token
}
}
{
“get_account”: {
“iban”: ”NL48OPEN0098543109”,
“token”: “73737539836501732697”
}
}

23. www.openweb.nl
Account creation: component overview

24. www.openweb.nl
Account creation: process sequence diagram

25. www.openweb.nl
Account creation: process sequence diagram

26. www.openweb.nl
Account creation: process sequence diagram

27. www.openweb.nl
Account creation: process sequence diagram

28. www.openweb.nl
Account creation: process sequence diagram

29. www.openweb.nl
Account creation: process sequence diagram

30. www.openweb.nl
Account creation: process sequence diagram

31. www.openweb.nl
Account creation: process sequence diagram

32. www.openweb.nl
Money transfer: component overview

33. www.openweb.nl
Demo
graphql.gklijs.tech
Front-end served by Netlify, backend dockers on vm in
Frankfurt

34. www.openweb.nl
Running tests: goals
▰ Production like
▰ Keep increasing load
▰ Run for a long time
▰ Find the limits and
bottlenecks

35. www.openweb.nl
Running tests: average end to end Latency

36. www.openweb.nl
Running tests: throughput, transactions/sec

37. www.openweb.nl
Running tests: cpu GraphQL endpoint

38. www.openweb.nl
Scaling kafka applications

39. www.openweb.nl
Scaling kafka applications
?

40. www.openweb.nl
What we learned
▰ Three ways to build GraphQL into event sourcing
▰ Demo shows it’s viable, 300 new subscriptions/sec
▰ Demo has limited limited authentication and
authorization
▰ Scalability solvable but tricky

41. www.openweb.nl
Questions?
@GKlijs
gklijs https://github.com/openweb-nl/kafka-graphql-examples
dev.to/gklijs/the-human-side-of-open-bank-mark-3o4b
www.slideshare.net/GerardKlijs
https://www.therepl.net/