Presentation from Sebastian Siemssen at the Drupal Camp 2015 in Vienna relating to modern web development and integration of GraphQL in Drupal 8.

1. GRAPHQL
Sebastian Siemssen @thefubhy

3. A LITTLE STORY …

4. ‣ Requires multiple round trips for fetching complex object graphs
‣ Over fetching — As the model grows, so does the payload
‣ High potential for breaking API changes
‣ Structure of the response dictated by the server
‣ Potentially a huge amount of different endpoints and thus complexity
‣ No formal specification resulting in various other shortcomings
PROBLEMS WITH REST

5. DEAR REST,
I STILL LOVE YOU !

6. Multiple round trips
When fetching complex, relational data structures: In
order to descent further into the object graph,
multiple round trips to the server are required.

8. Over fetching
Unless specifically designed for a given purpose, you
often have to deal with needlessly large and bloated
responses.

10. Compatibility and versioning
By changing your model you are very likely to break
your APIs. API versioning can mitigate that potential
damage at the cost of exponentially increasing
complexity.

11. Endpoints galore
Attempting to circumvent the aforementioned
problems often leads to a huge amount of bespoke/
ad-hoc endpoints. This, in turn, inevitably increases
the complexity of your application.

12. Your API is usually
composed of a
spectrum of different
interpretations of REST

13. No formal specification
No prescribed pattern for deprecation.
No standardized introspection functionality.
…

14. REST IS WHAT YOU MAKE IT

15. „This is not not how we as product developers think
about data. Product developers think of data in
terms of graphs.“
Nick Schrock

16. Code cartoons by Lin Clark

18. WHAT IS GRAPHQL?

19. What is GraphQL?
GraphQL is a query language designed to build client
applications by providing an intuitive and flexible
syntax and system for describing their data
requirements and interactions.

20. IT IS NOT A QUERY
LANGUAGE FOR A
GRAPH DATABASE

21. GRAPHQL IS
AGNOSTIC TO YOUR
STORAGE LAYER

22. {
me
{
name
}
}

23. {
'me':
{
'name':
'Sebastian
Siemssen'
}
}
{
me
{
name
}
}

24. {
user(id:
123)
{
name
}
}

25. {
user(id:
123)
{
name
}
}
{
'user':
{
'name':
'Sebastian
Siemssen'
}
}

26. {
'me':
{
'name':
'Sebastian
Siemssen',
'company':
{
'name':
'Zensations',
'website':
'http://zensations.at'
}
}
}
{
me
{
name,
company
{
name,
website
}
}
}

27. {
'me':
{
'name':
'Sebastian
Siemssen',
'profilePic':
{
'width':
100,
'height':
200,
'url':
'http://...'
}
}
}
{
me
{
name,
profilePic(size:
100)
{
width,
height,
url
}
}
}

28. {
'me':
{
'name':
'Sebastian
Siemssen',
'small':
{
'width':
100,
'height':
200,
'url':
'http://...'
},
'large':
{
'width':
300,
'height':
600,
'url':
'http://...'
}
}
}
{
me
{
name,
small:profilePic(size:
100)
{
width,
height,
url
},
large:profilePic(size:
300)
{
width,
height,
url
}
}
}

29. {
'me':
{
'name':
'Sebastian
Siemssen',
'articles':
[
{
'title':
'GraphQL
rocks'
},
{
'title':
'Ruben
sucks'
},
{
'title':
'...'
},
{
'title':
'...'
},
]
}
}
{
me
{
name,
articles
{
title
}
}
}

30. {
'me':
{
'name':
'Sebastian
Siemssen',
'articles':
[
{
'title':
'GraphQL
rocks',
'comments':
[
{
'author':
{
'name':
'Ruben
Teijeiro',
'label':
'This
is
sorcercy!'
}
},
{
'author':
{
'name':
'Dries
Buytaert',
'label':
'We
need
that
in
core!'
}
}
]
}
]
}
}
{
me
{
name,
articles
{
title,
comments(first:
10)
{
author
{
name,
label
}
}
}
}
}

31. Code cartoons by Lin Clark

32. Code cartoons by Lin Clark

33. Code cartoons by Lin Clark

34. GRAPHQL CHANGES
THE SERVER — CLIENT
RELATIONSHIP

35. THE SERVER PUBLISHES ITS
POSSIBILITIES
THE CLIENT SPECIFIES ITS
REQUIREMENTS

36. type
Query
{
me:
User,
user:
(id:
Int!):
User
}
{
me
{
name
},
user(id:
123)
{
name
}
}

37. type
User
{
name:
String,
articles:
(first:
Int,
orderBy:
ArticleOrderEnum):
[Article]
}
{
me
{
name
articles(first:
10,
orderBy:
CREATION_DATE)
},
user(id:
123)
{
name,
articles(first:
10,
orderBy:
CREATION_DATE)
}
}
enum
ArticleOrderEnum
[
CREATION_DATE,
CHANGED_DATE,
IMPORTANCE
]

38. TYPE
INTROSPECTION

39. {
__schema
{
queryType
{
name
},
types
{
name,
fields
{
name,
type
{
kind
name,
ofType
{
name
}
}
}
}
}
}

40. BUILDING A
GRAPHQL SERVER

41. GraphQL
Your application code
Database External APIs Others

42. type
User
{
name(user)
{
return
user.name;
},
articles(user,
arguments)
{
return
storage-­‐>load(…);
}
}

43. There is even more …
Conditionals, Fragments, Mutations, Subscriptions, …

44. DEMO

45. QUESTIONS

46. ‣ RFC Working Draft: https://facebook.github.io/graphql/
‣ Reference implemenetation: https://github.com/graphql/graphql-js
‣ GraphiQL: https://github.com/graphql/graphiql
‣ StarWars API Playground: http://graphql-swapi.parseapp.com/
‣ GraphQL Relay: https://facebook.github.io/relay/docs/graphql-relay-specification.html
‣ Learn GraphQL: https://learngraphql.com/
‣ …
RESOURCES

47. A Wiedner Hauptstraße 64
1040 Wien
T 01 89 00 179
M office@zensations.at
W www.zensations.at