Introduction to GraphQL (Reactathon)

Talk given at Reactathon 2018 3/20/2018

1. An Introduction To GraphQL Reactathon, March 20, 2018
2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2
3. Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering in GraphQL Language ▪ Schemas ▪ Queries 3
4. What is GraphQL? Taken straight from GraphQL.org
5. Describe your Data type Project { name: String tagline: String contributors: [User] } 5
6. Ask for What You Want query { project(name: "GraphQL") { tagline } } 6
7. Get Predictable Results query { project(name: "GraphQL") { tagline } } 7 { "project": { "tagline": "A query language for APIs" } }
8. Schemas Describing possible data
9. Describe everything that is possible ▪ All possible data results are described by the server. 9
10. Validation ▪ Every query is validated against the GraphQL schema ▪ No runtime errors for query documents 10
11. The GraphQL Schema gives us the basis of everything that is possible when communicating to the server from the client. 11
12. Queries Reading your data
13. 13 A simple query query { project(name: "GraphQL") { tagline } } { "project": { "tagline": "A query language for APIs" } }
14. 14 A simple query query { project(name: "GraphQL") { tagline author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
15. Fragments fragment MyFancyFragment on MyResource { someField } 15 These are required!
16. Spreading a fragment in a query query { someResource { ...MyFancyFragment } } 16 These two types should match
17. 17 A typical React application
18. 18 … broken down into components ...
19. 19 A complex query
20. 20 A complex query
21. 21 A complex query query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
22. 22 ▪ Components can be more portable ▪ Components are more self-sufficient. Every component can declare its own data requirements
23. GraphQL queries allow the client to declare exactly what it needs, in the form that it needs it in. 23
24. Clients Managing your data
25. Clients make it easier to manage data Relay Apollo 25
26. Caching ▪ Clients provide advanced caching for GraphQL queries. 26
27. Caching query ListView { allBooks { id name } } 27 query DetailView ($id: ID) { bookById(id: $id) { name } }
28. Clients make adopting GraphQL in your application a breeze. 28
29. Servers Serving your data
30. Mapping types to resolvers 30 const schemaDefinition = ` type Query { books: [Book] } type Book { title: String author: String } `; const resolvers = { Query: { books: () => fetch('https://api.com/books') }, };
31. Every field can be resolved separately. 31 const resolvers = { Query: { books: () => fetch('https://api.com/books') }, Book: { title: () => return ‘The book title’, author: () => fetch(‘https://api.com/authors’) } };
32. A single endpoint for data from anywhere { books { title author } } 32
33. GraphQL servers are flexible 33 ▪ They can act as proxies to existing data ▪ They can also act as the business logic layer itself
34. Tools Supercharging your data
35. GraphiQL 35
36. `eslint-plugin-graphql` 36 Catch invalid API calls at compile-time
37. `apollo-codegen` 37 Catch runtime errors at compile-time
38. GraphQL enables an entire ecosystem of tools to make developers more effective. 38
39. ▪ GraphQL makes it really simple to query lots of data, no matter where it is. 39 In Summary
40. ▪ Just like React, GraphQL can break down complexity into composable, reusable pieces 40 In Summary
41. ▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 41 How to Get Started
42. THANKS! 42 @jnwng Presentation template by SlidesCarnival