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
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
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
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
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/