An Introduction to GraphQL (ReactJS SF Bay Area)

A beginner-level introduction to GraphQL

1. An Introduction To GraphQL ReactJS SF Bay Area, 4/12/2018
2. Jon Wong Frontend Infrastructure, Coursera @jnwng 2
3. Who is this talk for? ▪ Folks who deal with complex React applications ▪ Folks who use APIs (like REST) on a day-to-day basis ▪ Folks who want to know more about GraphQL! 3
4. Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering in GraphQL Language ▪ Schemas ▪ Queries ▪ Operations 4
5. What is GraphQL? Taken straight from GraphQL.org
6. Describe your Data 6 type Project { name: String tagline: String contributors: [User] }
7. Ask for What You Want 7 query { project(name: "GraphQL") { tagline } }
8. Get Predictable Results 8 query { project(name: "GraphQL") { tagline } } { "project": { "tagline": "A query language for APIs" } } GraphQL JSON
9. Schemas Describing possible data
10. Describe everything that is possible ▪ All possible data results are described by the server. 10
11. Describe everything that is possible 11 type Project { name: String tagline: String contributors: [User] }
12. Discoverability ▪ Exploring an API is no longer a burden 12
13. GraphiQL 13
14. Validation ▪ Every query is validated against the GraphQL schema ▪ No runtime errors for making API calls 14
15. The GraphQL schema gives us the basis of everything that is possible when communicating to the server from the client. 15
16. Queries Reading your data
17. 17 A simple query query { project(name: "GraphQL") { tagline } } { "project": { "tagline": "A query language for APIs" } }
18. 18 A simple query with a name query AQueryWithAName { project(name: "GraphQL") { tagline } }
19. 19 A simple query with arguments query ($projectName: String!){ project(name: $projectName) { tagline } }
20. 20 … which requires variables query ($projectName: String!){ project(name: $projectName) { tagline } } { “projectName”: “react” } query variables
21. query { react: project(name: “react”){ tagline } graphql: project(name: “graphql”) { tagline } } 21 A simple query with aliases
22. 22 … which returns what you expect { “react”: { “tagline”: “A JavaScript library for building user interfaces” }, “graphql”: { “tagline”: “A query language for APIs” } }
23. Fragments 23 fragment Contributors on Project { name contributors }
24. Spreading a fragment in a query 24 query { project(name: "GraphQL") { tagline ...Contributors } } query { project(name: "GraphQL") { tagline name contributors } } These turn out the same!
25. GraphQL queries allow the client to declare exactly what it needs, in the form that it needs it in. 25
26. React && Queries Declarative + Composable
27. 27 A typical React application
28. 28 … broken down into components.
29. 29 This is how we normally get the data fetch(‘/courses/machine-learning’) fetch(‘/partners/?course=machine-learning’) fetch(‘/instructors/?course=machine-learning’)
30. 30 A complex GraphQL query query CoursePage { course(slug: “machine-learning”) { title description partner { name logo } instructor { name title photoUrl } } }
31. 31 A complex GraphQL query query CoursePage { course(slug: “machine-learning”) { title description ...Partner ...Instructor } }
32. 32 A complex GraphQL query fragment Partner on Course { partner { name logo } } fragment Instructor on Course { instructor { name title photoUrl } }
33. 33 ▪ Components can be more portable ▪ Components are more self-sufficient. Every component can declare its own data requirements
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 37 query ListView { allBooks { id name } } query DetailView ($id: ID) { bookById(id: $id) { name } }
38. The GraphQL HoC 38 const ProjectTitle = ({ data: { project: { tagline } } }) => <h1>{tagline}</h1>; export default graphql(gql` query { project(name: “graphql”) { tagline } } `)(ProjectTitle);
39. Clients make adopting GraphQL in your application a breeze. 39
40. Servers Serving your data
41. Mapping types to resolvers 41 const typeDefs = ` type Query { projects: [Project] } type Project { name: String tagline: String contributors: [User] } `; const resolvers = { Query: { projects: () => fetch('https://api.com/project’) }, };
42. Every field can be resolved separately. 42 const resolvers = { Project: { name: () => return ‘graphql’, tagline: () => 'A query language for APIs’, contributors: () => fetch(‘/users/?projectName=graphql’) } };
43. GraphQL servers are flexible 43 ▪ They can act as proxies to existing data ▪ They can also become the business logic layer itself
44. Tools Supercharging your data
45. GraphiQL 45
46. `eslint-plugin-graphql` 46 Catch invalid API calls at compile-time
47. `apollo-codegen` 47 Catch runtime errors at compile-time
48. GraphQL enables an entire ecosystem of tools to make developers more effective. 48
49. ▪ GraphQL makes it really simple to query lots of data, no matter where it is. 49 In Summary
50. ▪ Just like React, GraphQL can break down complexity into composable, reusable pieces 50 In Summary
51. ▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 51 How to Get Started
52. THANKS! 52 @jnwng Presentation template by SlidesCarnival