Presentation of Camunda GraphQL Extension at Camunda Community Day 2017 in Berlin

1. Camunda GraphQL
A query language for the Camunda API

2. Loydl Unternehmensberatung
Harald Loydl
IT Consultant
harald.loydl@loydl.ch
Daniel Vogel
Fullstack Javascript Developer
daniel.vogel@loydl.ch

3. Content
1. What is GraphQL?
2. Camunda GraphQL Demo
3. Camunda GraphQL Architecture
4. How to build GraphQL Clients
5. Outlook

4. 1. What is GraphQL?
• API query language
• Types / Schema
• Clients query the server using GraphQL
• Introspection
• Automatic documentation
• The better REST

6. Your Domain Model is a Graph
User Task
tasks 0..*
0..1 assignee

7. Task
TaskEntity

8. User
UserEntity

9. Root Query
=
All Query
Capabilities
of the
Server
à Capability to query for tasks:
http://localhost:8080/graphql/?query={tasks{name}}

10. Query
RootResolver

12. DEMO:
Camunda GraphQL

13. Demo: Get task names
Query: Result:

14. Demo: Get task names using REST
http://localhost:8080/engine-rest/engine/default/taskQuery:
Result: Over-Fetching
GraphQL: 411 Bytes
REST: 5000 Bytes à 12 x more data
92% of data not needed

15. Demo: Get tasks + assignee
Query: Result:

16. Demo: Get tasks + assignee in REST
http://localhost:8080/engine-rest/engine/default/task
http://localhost:8080/engine-rest/engine/default/user/demo/profile
Queries
Result:
Under-Fetching
• Multiple requests needed
• responses need processing to final JSON
à (N+1) request problem on client side

17. Demo: Type ahead/code completion, syntax check

19. Container
Shared Process Engine
Camunda Java API
REST
GraphQL
web/mobileTasklistClient
Server
web/mobile
microservice
React.js
new Tasklist
RESTRESTREST
REST
React /Native
Angular
iOS
Android
JavaScript
Architecture:

20. GraphQL-Server Implementation
• @SpringBootApplication as deployable war-file
• Configurable
• Basically one Java dependencies: graphql-java
• GraphQL schema text files *.graphqls (no Java code)
• GraphiQL client included, accessible via http://server/graphql/
• Security: Basic Auth, JWT

21. GraphQL client
• GraphiQL client at server:port/graphql/
• for exploring the Servers GraphQL capabilities
• Apollo Client from www.apollodata.com:
• Batching and Caching
• React /Native, Angular 2/4, iOS, Java/Android, plain JavaScript
• Apollo Client Dev Tools (Chrome): Debugging the client
• Production ready

22. Demo:
Vanilla JavaScript Apollo Client

23. GraphQL new Tasklist
node.js +
React.js
render
React.js
Forms
schema
Deployed Process Application
BPMN processes
Prototype
schemaschema
resolverresolverresolver
Camunda
Java API
formKey
React.js
Form
React.js
Form
React.js
Form
Client:Server: Server:

24. GraphQL Tasklist
• shows how to use the GraphQL Apollo Client and React.js
• GraphQL queries defined in code:

25. GraphQL Client Use Cases
• Dashboards / Monitoring – realtime/reactive
• Reporting
• Mobile Clients
• Other Services as “Clients” in a SOA/Microservices Architecture

26. Camunda GraphQL Benefits
• GraphQL is the better REST…
• Efficiency: Fewer bytes and roundtrips
• Type System: express our API data in a more natural way
• No more client specific endpoints (Web vs. mobile)
• Separation of concerns (backend vs frontend)
• No API versioning, formal deprecation
• Improved developer experience

27. Outlook
• Increase Java API coverage as you need it…
• … but keep GraphQL Schema coherent with Java API
• GraphQL used in Microservice Architectures (API-Gateway?)
• Push realtime updates to clients with GraphQL subscriptions
• Camunda Tasklist, Cockpit, Admin as GraphQL clients
• GraphQL in Camunda Core

28. Links
• Camunda GraphQL on GitHub:
https://github.com/camunda/camunda-bpm-graphql
• GraphQL Schema Language Cheat Sheet
• Explore GraphQL: https://www.graphql.com/
• GraphQL Specification (Facebook)
• Swagger to GraphQL:
https://github.com/yarax/swagger-to-graphql
• Moving API from REST to GraphQL:
https://medium.com/@raxwunter/moving-existing-api-from-rest-to-
graphql-205bab22c184
• GraphQL Schema Visualization: https://apis.guru/graphql-voyager/