Introduction to GraphQl !

1. Fabien de Maestri
GraphQL

2. Fabien de Maestri
@FdMstri
fabien.demaestri@gmail.com
Freelance AngularJS / Node.js / ReactJS
Co-fondateur

3. GraphQL
« GraphQL is a query language and execution
engine tied to any backend service. »

4. GraphQL
Avoid painful refacto

5. GraphQL
Avoid painful refacto
Single entry for endpoint

6. GraphQL
Avoid painful refacto
Single entry for endpoint
Easy to debug

7. GraphQL
Avoid painful refacto
Single entry for endpoint
Easy to debug
Agregate data easily

8. GraphQL
Avoid painful refacto
Single entry for endpoint
Easy to debug
Agregate data easily
Normalization

9. GraphQL
Avoid painful refacto
Single entry for endpoint
Easy to debug
Agregate data easily
Normalization
Easy to test

10. What can we see ?
Mirroring

11. What can we see ?
Mirroring
Hierarchical

12. What can we see ?
Mirroring
Hierarchical
Strongly typed

13. What can we see ?
Mirroring
Hierarchical
Strongly typed
Version free !

14. Champs requis, Arguments

15. GET / POST
Champs requis, Arguments
CLIENT

16. Serveur GraphQL
resolve()
resolve()
GET / POST
Champs requis, Arguments
CLIENT SERVEUR

17. Serveur GraphQL
resolve()
resolve()
resolve()
GET / POST
Champs requis, Arguments
CLIENT SERVEUR

18. Serveur GraphQL
Agrégation de donnée
resolve()
resolve()
resolve()
GET / POST
Champs requis, Arguments
CLIENT SERVEUR

19. Serveur GraphQL
Agrégation de donnée
Normalisation
resolve()
resolve()
resolve()
GET / POST
Champs requis, Arguments
CLIENT SERVEUR

20. Serveur GraphQL
Typage
Agrégation de donnée
Normalisation
resolve()
resolve()
resolve()
GET / POST
Champs requis, Arguments
CLIENT SERVEUR

21. Serveur GraphQL
Typage
Agrégation de donnée
Normalisation
resolve()
resolve()
resolve()
GET / POST
Champs requis, Arguments
JSON
CLIENT SERVEUR

22. RootSchema

23. RootSchema
Operation

24. RootSchema
Operation
Types

25. Ressource Cars
Type

26. Ressource Cars
Type
Arguments

27. Ressource Cars
Type
Arguments

28. Ressource Cars
Type
Resolve
Arguments

29. Ressource Cars
Type
Resolve
Arguments
Composition

30. GraphiQL
Fast feedback

31. GraphiQL
Fast feedback
Explicit errors

32. GraphiQL
Fast feedback
Explicit errors
Automatic query completion

33. GraphiQL
Fast feedback
Explicit errors
Automatic query completion
Run and inspect query results.

34. GraphiQL
Fast feedback
Explicit errors
Automatic query completion
Run and inspect query results.
Introspection

35. GraphiQL
Fast feedback
Explicit errors
Automatic query completion
Run and inspect query results.
DEMO !

36. Ecosystem
Used in Facebook’s native apps since 2012
Open source in July 2015
Front-end framework based on GraphQL like Relay
@leebLee Byron

37. Merci !