Going GraphQL First - ReactSF

Presented at ReactSF on 8/30/2017, this was a talk about GraphQL, its benefits for client developers, and how GraphQL makes it easier to build product!

Transcript

1. Going GraphQL First ReactSF | 8/30/2017
2. Jon Wong @jnwng Frontend Infrastructure at Coursera
4. APIs can be hard to work with
5. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL Some issues with data at Coursera 5 Backends can easily break clients
 API contracts are not automatically enforced on the client or server
 API Discoverability
 Finding the right REST endpoint is difficult. Knowing the expected request and response formats is even harder.

6. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL Some issues with data at Coursera 6 It’s hard for backend devs to build the perfect API Either you end up building a view-specific API
 or modular endpoints that need to be joined on the client. Performance
 Traversing through five entities requires five round-trips.
7. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 7
8. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 8 GraphQL is a
 query language, not a library.
9. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 9 query MyCoursesQuery { myCourses(limit: 5, sortBy: RECENT) { name slug instructors { firstName lastName university(filter: VISIBLE_TO_LEARNERS) { name country slug } } } } query MyCoursesQuery { myCourses(limit: 5, sortBy: RECENT) { name slug instructors { firstName lastName university(filter: VISIBLE_TO_LEARNERS) { name country slug } } } } query MyCoursesQuery { myCourses(limit: 5, sortBy: RECENT) { name slug instructors { firstName lastName university(filter: VISIBLE_TO_LEARNERS) { name country slug } } } } query MyCoursesQuery { myCourses(limit: 5, sortBy: RECENT) { name slug instructors { firstName lastName university(filter: VISIBLE_TO_LEARNERS) { name country slug } } } }
10. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 10 { "myCourses": [ { "name": "Machine Learning", "slug": "machine-learning", "instructors": [ { "firstName": "Andrew", "lastName": "Ng" "university": { "name": "Stanford University", "country": "United States", "slug": "stanford" } }] }] }
11. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 11 query MyCoursesQuery { myCourses(limit: 5, sortBy: RECENT) { name slug instructors { firstName lastName university(filter: VISIBLE_TO_LEARNERS) { name country slug } } } } { "myCourses": [{ "name": "Machine Learning", "slug": "machine-learning", "instructors": [{ "firstName": "Andrew", "lastName": "Ng" "university": { "name": "Stanford University", "country": "United States", “slug": "stanford" } }] }] }
12. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 12
13. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 13 query CoursePage {
 course(slug: "machine-learning") {
 title description } } <Course />
14. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 14 query CoursePage {
 course(slug: "machine-learning") {
 title description } } <Course /> university { name logo } <University />
15. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 15 query CoursePage {
 course(slug: "machine-learning") {
 title description } } <Course /> university { name logo } <University /> instructor { name title } <Instructor />
16. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 16 query CoursePage {
 course(slug: machine-learning") {
 title description } } <Course /> university { name logo } <University /> instructor { name title } <Instructor /> profile { photo } <ProfilePhoto />
17. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 17 All queries are backed
 by a typed schema
18. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 18 type root { myCourses(limit: Int, sortBy: COURSE_SORT): [Course] } enum COURSE_SORT { RECENT ENROLL_DATE } type Course { name: String slug: String instructors: [Instructor] } type Instructor { firstName: String lastName: String university(filter: VISIBILITY_FILTER): University }
19. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 19
20. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 20 All data is available in one place Clients don’t know (or care) about where data actually comes from All data is typed No longer will you have to guess what is provided by an endpoint. GraphQL enforces typing of all data. Its a single entry point for all your data
21. Why do we love GraphQL? 21
22. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 22 You get exactly what you want, and only what you want Request exactly the data you need for your product. GraphQL is declarative Worry about what your product needs, not how it gets there. Data usage evolves with the product Data declarations are composable, just like React.
 Use the same mental model! Inverting API control back to client developers
23. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 23 Every field in your query is validated All fields (even traversals between different models) are validated while writing code. Editor autocompletion against available backend data Modern editors can now autocomplete against server-side fields, so there’s no more guessing as to whether or not something exists. Code generation of static types for query allows validation of actual data usage, not just existence. We can generate Typescript and Flow bindings to ensure correct type usage at compile time. Providing schemas to client-side code
24. https://github.com/apollographql/eslint-plugin-graphql Linting
25. https://github.com/jimkyndemeyer/js-graphql-intellij-plugin IDE Support
26. https://transform.now.sh/graphql-to-flow Flow / Typescript Support
27. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 27 GraphQL is product-centric Think less about where your data comes from, and more about using that data. Query complexity should match product complexity Anything beyond this is a warning sign that something is wrong,
 and that more work can be delegated to the server. Think about your product!
28. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 28 query { CoursesV1Resource { bySlug(slug: "machine-learning") { coursePurchases { transactions { transactionDate expirationDate } } certificates { certificateGrantDate certificateGrade } } offersCertificateForPurchase } EnterpriseProgramsV1Resource { myPrograms { eligibleCourses } } } query { CoursesV1Resource { bySlug(slug: "machine-learning") { coursePurchases { transactions { transactionDate expirationDate } } certificates { certificateGrantDate certificateGrade } } offersCertificateForPurchase } EnterpriseProgramsV1Resource { myPrograms { eligibleCourses } } } query { CoursesV1Resource { bySlug(slug: "machine-learning") { shouldShowUpsell } } } Actual Query Ideal Query 28
29. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 29 GraphQL is product-centric Think less about where your data comes from, and more about using that data. Query complexity should match product complexity Anything beyond this is a warning sign that something is wrong,
 and that more work can be delegated to the server. Schema-first development Client developers and backend developers can work in parallel once a schema is developed. Think about your product!
30. Getting Started with GraphQL
31. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 31 Run your GraphQL server in the browser Your React application can use GraphQL today by running GraphQL itself in the client. Or use launchpad.graphql.com! Create a GraphQL server that delegates to existing endpoints. Packages like apollo-server make it super simple to build servers that can consume your downstream services. Backend-as-a-service Scaphold and Graph.cool both provide GraphQL backends in the cloud Trying GraphQL out
32. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 32 Data declarations Specify exactly what data you need, wherever you use it. Caching Clients like Relay Modern and Apollo deal with caching out of the box, making it simple to build performant React / GraphQL applications. Drop-in support for GraphQL Clients makes it straightforward to make the best use of GraphQL throughout your application. Using a GraphQL client
33. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 33 We often don’t have the luxury of building from scratch. Trying to convince client and server developers to stop what they’re doing and use GraphQL is difficult. Opt for incremental adoption where possible. GraphQL clients provide drop-in support Avoid disruption of backend services GraphQL is a layer on top of your backend services, not a replacement for them. Innovate in place
34. Chapter 1: APIs are hard Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 34 GraphQL.org The homepage of GraphQL is beautiful and contains a ton of in- depth materials on the in’s and out’s of GraphQL. launchpad.graphql.com Stand up a GraphQL server from your browser! You can even hit this server from your local GraphQL Apollo, GraphQL Slack Join the Apollo and GraphQL slacks for the latest about GraphQL. Resources
35. Thanks! Jon Wong
 @jnwng