Graphql talk introduction (First steps and examples)

An introduction and fast tutorial about GraphQL and your first steps

Transcript

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 fragments FRAGMENTS
43. GRAPHQL Using query variables QUERY VARIABLES
44. GRAPHQL Using query variables QUERY VARIABLES