Introduction to GraphQL

Real World React November 17th, 2017

1. An Introduction To GraphQL Real World React, November 16, 2017
2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2
3. Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering in GraphQL Language ▪ Schemas ▪ Queries ▪ Mutations 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 { project(name: "GraphQL") { tagline } } 6
7. Get Predictable Results { project(name: "GraphQL") { tagline } } 7 { "project": { "tagline": "A query language for APIs" } }
8. A single endpoint for data from anywhere { book { author { tweets amazonReviews } } } 8
9. Schemas Describing possible data
10. Describe everything that is possible ▪ All possible data results are described by the server. 10
11. Validation ▪ Every query is validated against the GraphQL schema ▪ No runtime errors for query documents 11
12. Execution ▪ Query execution utilizes the schema to figure out what to run, mapping them to “resolvers” 12
13. The GraphQL Schema gives us the basis of everything that is possible when communicating to the server from the client. 13
14. Queries Reading your data
15. query { someField } { “data”: { “someField”: “someValue” }} 15 A simple query
16. query MyQueryName { fieldName } 16 A simple query with a name
17. query ($someArg: String) { fieldWithArg(name: $someArg) } 17 A simple query with arguments
18. query ($someArg: String) { fieldWithArg(name: $someArg) } + { “someArg”: “my-field-name” } 18 … which requires variables
19. query { smallPicture: picture(size: 100) mediumPicture: picture(size: 500) largePicture: picture(size: 2000) } 19 A simple query with aliases
20. Fragments fragment MyFancyFragment on MyResource { someField } 20 These are required!
21. Spreading a fragment in a query query { someResource { ...MyFancyFragment } } 21 These two types should match
22. 22 A typical React application
23. 23 … broken down into components ...
24. 24 A complex query
25. 25 A complex query
26. 26 A complex query query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
27. 27 <h1>{course.title}</h1> <p>{course.description}</p> <University university={course.university} /> <Instructor instructor={course.instructor} /> Breaking queries down with fragments query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }
28. 28 ▪ Components can be more portable ▪ Components are more self-sufficient. Every component can declare its own data requirements
29. GraphQL queries allow the client to declare exactly what it needs, in the form that it needs it in. 29
30. Mutations Writing your data
31. mutation { addToCounter { count } } 31 A simple mutation { “data”: { “addToCounter”: { “count”: 1 } } }
32. mutation { addToCounter { count } } 32 A simple mutation This is a query
33. mutation { addToCounter { count } second: addToCounter { count } } 33 Mutations execute serially { “data”: { “addToCounter”: { “count”: 1 }, “second”: { “count”: 2 } } }
34. Clients Managing your data
35. Clients make it easier to manage data Relay Apollo 35
36. Caching ▪ Clients provide advanced caching for GraphQL queries. 36
37. Caching query ListView { allBooks { id name } } 37 query DetailView ($id: ID) { bookById(id: $id) { name } }
38. The GraphQL HoC const Component = ({ data: { someField }}) => <span>{someField}</span> export default graphql(gql` query { someField } `)(Component) 38
40. 40 const Instructor = ({ data: { instructor }}) => ( <View> <ProfilePhoto profile={instructor.profile} /> <span>{instructor.name}</span> </View> ); export default graphql(gql` query { instructor(id: 1) { name profile { ...ProfilePhoto } } } ${ProfilePhoto.fragment} `)(Instructor)
41. Clients make adopting GraphQL in your application a breeze. 41
42. Servers Serving your data
43. Mapping types to resolvers 43 const schemaDefinition = ` type Query { books: [Book] } type Book { title: String author: String } `; const resolvers = { Query: { books: () => fetch('https://api.com/books') }, };
44. Every field can be resolved separately. 44 const resolvers = { Query: { books: () => fetch('https://api.com/books') }, Book: { reviews: () => return [], title: () => fetch(‘https://api.com/titles’) } };
45. A single endpoint for data from anywhere { book { author { tweets amazonReviews } } } 45
46. GraphQL servers are flexible 46 ▪ They can act as proxies to existing data ▪ They can also become the business logic layer itself
47. Tools Supercharging your data
48. GraphiQL 48
49. `eslint-plugin-graphql` 49 Catch invalid API calls at compile-time
50. `apollo-codegen` 50 Catch runtime errors at compile-time
51. GraphQL enables an entire ecosystem of tools to make developers more effective. 51
52. ▪ GraphQL makes it really simple to query lots of data, no matter where it is. 52 In Summary
53. ▪ Just like React, GraphQL can break down complexity into composable, reusable pieces 53 In Summary
54. ▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 54 How to Get Started
55. THANKS! 55 @jnwng Presentation template by SlidesCarnival