Slide 1

Slide 1 text

An Introduction To GraphQL Real World React, November 16, 2017

Slide 2

Slide 2 text

Jon Wong Frontend Infrastructure, Coursera @jnwng 2

Slide 3

Slide 3 text

Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering in GraphQL Language ▪ Schemas ▪ Queries ▪ Mutations 3

Slide 4

Slide 4 text

What is GraphQL? Taken straight from GraphQL.org

Slide 5

Slide 5 text

Describe your Data type Project { name: String tagline: String contributors: [User] } 5

Slide 6

Slide 6 text

Ask for What You Want { project(name: "GraphQL") { tagline } } 6

Slide 7

Slide 7 text

Get Predictable Results { project(name: "GraphQL") { tagline } } 7 { "project": { "tagline": "A query language for APIs" } }

Slide 8

Slide 8 text

A single endpoint for data from anywhere { book { author { tweets amazonReviews } } } 8

Slide 9

Slide 9 text

Schemas Describing possible data

Slide 10

Slide 10 text

Describe everything that is possible ▪ All possible data results are described by the server. 10

Slide 11

Slide 11 text

Validation ▪ Every query is validated against the GraphQL schema ▪ No runtime errors for query documents 11

Slide 12

Slide 12 text

Execution ▪ Query execution utilizes the schema to figure out what to run, mapping them to “resolvers” 12

Slide 13

Slide 13 text

The GraphQL Schema gives us the basis of everything that is possible when communicating to the server from the client. 13

Slide 14

Slide 14 text

Queries Reading your data

Slide 15

Slide 15 text

query { someField } { “data”: { “someField”: “someValue” }} 15 A simple query

Slide 16

Slide 16 text

query MyQueryName { fieldName } 16 A simple query with a name

Slide 17

Slide 17 text

query ($someArg: String) { fieldWithArg(name: $someArg) } 17 A simple query with arguments

Slide 18

Slide 18 text

query ($someArg: String) { fieldWithArg(name: $someArg) } + { “someArg”: “my-field-name” } 18 … which requires variables

Slide 19

Slide 19 text

query { smallPicture: picture(size: 100) mediumPicture: picture(size: 500) largePicture: picture(size: 2000) } 19 A simple query with aliases

Slide 20

Slide 20 text

Fragments fragment MyFancyFragment on MyResource { someField } 20 These are required!

Slide 21

Slide 21 text

Spreading a fragment in a query query { someResource { ...MyFancyFragment } } 21 These two types should match

Slide 22

Slide 22 text

22 A typical React application

Slide 23

Slide 23 text

23 … broken down into components ...

Slide 24

Slide 24 text

24 A complex query

Slide 25

Slide 25 text

25 A complex query

Slide 26

Slide 26 text

26 A complex query query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }

Slide 27

Slide 27 text

{course.title}

{course.description}

Breaking queries down with fragments query CoursePage { course(slug: “Machine Learning”) { title description ...University ...Instructor } }

Slide 28

Slide 28 text

28 ▪ Components can be more portable ▪ Components are more self-sufficient. Every component can declare its own data requirements

Slide 29

Slide 29 text

GraphQL queries allow the client to declare exactly what it needs, in the form that it needs it in. 29

Slide 30

Slide 30 text

Mutations Writing your data

Slide 31

Slide 31 text

mutation { addToCounter { count } } 31 A simple mutation { “data”: { “addToCounter”: { “count”: 1 } } }

Slide 32

Slide 32 text

mutation { addToCounter { count } } 32 A simple mutation This is a query

Slide 33

Slide 33 text

mutation { addToCounter { count } second: addToCounter { count } } 33 Mutations execute serially { “data”: { “addToCounter”: { “count”: 1 }, “second”: { “count”: 2 } } }

Slide 34

Slide 34 text

Clients Managing your data

Slide 35

Slide 35 text

Clients make it easier to manage data Relay Apollo 35

Slide 36

Slide 36 text

Caching ▪ Clients provide advanced caching for GraphQL queries. 36

Slide 37

Slide 37 text

Caching query ListView { allBooks { id name } } 37 query DetailView ($id: ID) { bookById(id: $id) { name } }

Slide 38

Slide 38 text

The GraphQL HoC const Component = ({ data: { someField }}) => {someField} export default graphql(gql` query { someField } `)(Component) 38

Slide 39

Slide 39 text

Slide 40

Slide 40 text

40 const Instructor = ({ data: { instructor }}) => ( {instructor.name} ); export default graphql(gql` query { instructor(id: 1) { name profile { ...ProfilePhoto } } } ${ProfilePhoto.fragment} `)(Instructor)

Slide 41

Slide 41 text

Clients make adopting GraphQL in your application a breeze. 41

Slide 42

Slide 42 text

Servers Serving your data

Slide 43

Slide 43 text

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') }, };

Slide 44

Slide 44 text

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’) } };

Slide 45

Slide 45 text

A single endpoint for data from anywhere { book { author { tweets amazonReviews } } } 45

Slide 46

Slide 46 text

GraphQL servers are flexible 46 ▪ They can act as proxies to existing data ▪ They can also become the business logic layer itself

Slide 47

Slide 47 text

Tools Supercharging your data

Slide 48

Slide 48 text

GraphiQL 48

Slide 49

Slide 49 text

`eslint-plugin-graphql` 49 Catch invalid API calls at compile-time

Slide 50

Slide 50 text

`apollo-codegen` 50 Catch runtime errors at compile-time

Slide 51

Slide 51 text

GraphQL enables an entire ecosystem of tools to make developers more effective. 51

Slide 52

Slide 52 text

▪ GraphQL makes it really simple to query lots of data, no matter where it is. 52 In Summary

Slide 53

Slide 53 text

▪ Just like React, GraphQL can break down complexity into composable, reusable pieces 53 In Summary

Slide 54

Slide 54 text

▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 54 How to Get Started

Slide 55

Slide 55 text

THANKS! 55 @jnwng Presentation template by SlidesCarnival