Going GraphQL First Real World React | 4/20/2017 

Jon Wong @jnwng Frontend Infrastructure at Coursera 

No content

APIs are hard 

Chapter 1: Issues We’ve Had 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.
 

Chapter 1: Issues We’ve Had 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. 

What is GraphQL? 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 8 query { course(slug: "machine-learning") { name instructors { fullName university { name } } } } Its a language (with a specification) { data: { course: { name: "Machine Learning", instructors: [{ fullName: "Andrew Ng", university: { name: "Stanford Univ." } }] } } } 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 9 Here’s how it works on the server query { course( slug: ‘machine-learning’ ) { name instructors { fullName university { name } } } } CourseResolver InstructorResolver UniversityResolver /api/courses/:slug /api/instructors/:id /api/universities/:id REST APIs 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 10 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 

Why do we love GraphQL? 11 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 12 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 

Let me show you. 13 

No content

No content

query CoursePage {
 course(slug: “machine-learning”) {
 title description } } 

query CoursePage {
 course(slug: “machine-learning”) {
 title description } } university { name logo } 

query CoursePage {
 course(slug: “machine-learning”) {
 title description } } university { name logo } instructor { name title } 

query CoursePage {
 course(slug: “machine-learning”) {
 title description } } university { name logo } instructor { name title } profile { photo } 

query CoursePage {
 course(slug: “machine-learning”) {
 title description } } university { name logo } instructor { name title } profile { photo }

{course.title}

{course.description}



Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 21 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 

https://github.com/apollographql/eslint-plugin-graphql Linting 

https://github.com/jimkyndemeyer/js-graphql-intellij-plugin IDE Support 

https://github.com/apollographql/apollo-codegen/blob/master/test/flow/codeGeneration.js Flow / Typescript Support 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 25 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! 

Getting Started with GraphQL 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 27 Run your GraphQL server in the browser Your React application can use GraphQL today by building GraphQL resolvers in the client. Create a GraphQL server that delegates to existing endpoints. Packages like graphql-server make it super simple to build servers that can consume your downstream services. Backend-as-a-service Scaphold and Graphcool both provide GraphQL backends in the cloud Trying GraphQL out 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 28 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. Performance optimizations Instead of sending a seemingly endless query to the server,
 just send an ID instead. Using a GraphQL client 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 29 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 make it easy to drop-in support Avoid disruption of backend services The GraphQL server is separate from the services it consumes, and allows backend developers to continue to provide business value. Innovate in place 

Chapter 1: Issues We’ve Had Chapter 2: What is GraphQL? Chapter 3: Why We Love GraphQL Chapter 4: Getting Started with GraphQL 30 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. LearnGraphQL.com Interactive GraphQL lessons to learn the various parts of the syntax. Apollo, GraphQL Slack Join the Apollo and GraphQL slacks for the latest about GraphQL. Resources 

Thanks! Jon Wong
 @jnwng