An introduction and fast tutorial about GraphQL and your first steps

1. GraphQL

2. GRAPHQL
WHAT IS GRAPHQL?
GraphQL is an application layer
query language from Facebook.
GraphQL is a specification

3. GRAPHQL
MOTIVATION
2012

4. GRAPHQL
MOTIVATION
Lee Byron is an Engineer at Facebook
working on GraphQL. He’s been making
things at Facebook since 2008, including
Immutable.js, Mobile & JavaScript.

5. GRAPHQL
MOTIVATION
UP UNTIL 2012, NEWS FEED COULD ONLY BE
REQUESTED AND DELIVERED AS HTML FROM
OUR SERVERS. DURING THE EFFORT TO REBUILD
NEWS FEED AS A NATIVE IOS VIEW WE HAD TO
REVISIT THIS ARCHITECTURE TO GET RAW DATA
Lee Byron

6. GRAPHQL
WHAT IS GRAPHQL? http://facebook.github.io/graphql

7. GRAPHQL
Hello GraphQL
WHAT IS GRAPHQL?

8. GRAPHQL
WHAT IS GRAPHQL?

9. GRAPHQL
With GraphQL, you can define your
backend as a well-defined graph-based
schema. Then client applications can
query your dataset as they are needed.
WHAT IS GRAPHQL?

10. GRAPHQL
So, you don't need to change your
backend for data requirement changes in
client apps. This simply solves one of the
biggest problems in managing REST API.
WHAT IS GRAPHQL?

11. GRAPHQL
WHY GRAPHQL?
Path
Management
Hell

12. GRAPHQL
GraphQL also allows client applications to
batch and fetch data very efficiently. For
an example, have a look at the following
GraphQL query:
WHAT IS GRAPHQL?

13. GRAPHQL
WHAT IS GRAPHQL?
This is a GraphQL query to fetch data for a blog post
with comments and author information

14. GRAPHQL
WHAT IS GRAPHQL? Here's the result of the above query:

15. GRAPHQL
WHAT IS GRAPHQL?
GraphiQL

16. GRAPHQL
▸ Declarative Query Language
▸ Hierarchical
▸ Product-centric
▸ Strong-typing
▸ Client-specified queries
WHAT IS GRAPHQL?

17. GRAPHQL
WHAT IS GRAPHQL?

18. GRAPHQL
WHAT IS GRAPHQL?
GraphQL is a query language for your API,
and a server-side runtime for executing
queries by using a type system you define
for your data

19. GRAPHQL
WHAT IS GRAPHQL?
▸ Query (GET)
▸ Mutation (POST/PUT/DELETE)
GraphQL Operations

20. GRAPHQL
STORY
A quick story before

21. GRAPHQL
STORY
A Frontend Dev will start a new
App and integrate with this
REST API

22. GRAPHQL
STORY

23. GRAPHQL
STORY
Design send the first layout
for our Frontend Dev

24. GRAPHQL
STORY

25. GRAPHQL
STORY http://swapi.co/api/films/

26. GRAPHQL
STORY

27. GRAPHQL
STORY

28. GRAPHQL
Let's write our first GraphQL query
QUERYING GRAPHQL

29. GRAPHQL
QUERYING GRAPHQL

30. GRAPHQL
Nested Querying
QUERYING GRAPHQL

31. GRAPHQL
Arguments
QUERYING GRAPHQL

32. GRAPHQL
Multiple fields
QUERYING GRAPHQL

33. GRAPHQL
Assigning a result to a variable
QUERYING GRAPHQL

34. GRAPHQL
Assigning a result to a variable
QUERYING GRAPHQL

35. GRAPHQL
Assigning a result to a variable
QUERYING GRAPHQL

36. GRAPHQL
Mutations are the way to change the dataset
behind GraphQL. A mutation is very similar to a
field in a GraphQL query, but GraphQL
assumes a mutation has side effects and
changes the dataset behind the schema.
INVOKING MUTATIONS

37. GRAPHQL
First mutation
INVOKING MUTATIONS

38. GRAPHQL
First mutation
INVOKING MUTATIONS

39. GRAPHQL
Multiple mutations
INVOKING MUTATIONS

40. GRAPHQL
Fragments are the way to group commonly used fields and reuse them.
FRAGMENTS

41. GRAPHQL
So check this query. It's the same as above, but with fragments:
FRAGMENTS

42. GRAPHQL
Fragments with nested fragmentsFRAGMENTS

43. GRAPHQL
Using query variables
QUERY VARIABLES

44. GRAPHQL
Using query variablesQUERY VARIABLES