Slide 1

Slide 1 text

@glnnrys React & GraphQL From zero to production @glnnrys

Slide 2

Slide 2 text

@glnnrys > whoami

Slide 3

Slide 3 text

@glnnrys query getCoach { name twitter job expertise oss(type: "most-popular") elseIDo } { "data": { "name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Freelance Front-end Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] } } @glnnrys

Slide 4

Slide 4 text

@glnnrys Goals for today

Slide 5

Slide 5 text

@glnnrys

Slide 6

Slide 6 text

@glnnrys Learn

Slide 7

Slide 7 text

@glnnrys Fun

Slide 8

Slide 8 text

@glnnrys Ship

Slide 9

Slide 9 text

@glnnrys What is GraphQL?

Slide 10

Slide 10 text

@glnnrys

Slide 11

Slide 11 text

@glnnrys Query Language for APIs

Slide 12

Slide 12 text

@glnnrys

Slide 13

Slide 13 text

@glnnrys Describe your schema in a type system

Slide 14

Slide 14 text

@glnnrys type Speaker { id: ID! name: String talks: [Talk]! } type Talk { id: ID! title: String by: Speaker }

Slide 15

Slide 15 text

@glnnrys It's language agnostic

Slide 16

Slide 16 text

@glnnrys

Slide 17

Slide 17 text

@glnnrys Query IDEs

Slide 18

Slide 18 text

@glnnrys github.com/graphql/graphiql

Slide 19

Slide 19 text

@glnnrys github.com/prisma/graphql-playground

Slide 20

Slide 20 text

@glnnrys Automatic documentation

Slide 21

Slide 21 text

@glnnrys

Slide 22

Slide 22 text

@glnnrys

Slide 23

Slide 23 text

@glnnrys

Slide 24

Slide 24 text

@glnnrys {({ data, error, loading }) => { if (loading) return 'Loading ...'; if (error) return `Something went wrong! ${error.message}`; return ; }}

Slide 25

Slide 25 text

@glnnrys Questions?

Slide 26

Slide 26 text

@glnnrys Let's get started!

Slide 27

Slide 27 text

@glnnrys github.com/glennreyes/react-graphql-workshop

Slide 28

Slide 28 text

@glnnrys Schemas & Types

Slide 29

Slide 29 text

@glnnrys type Person { id: ID! # Not nullable name: String # Nullable age: Int weight: Float isOnline: Boolean posts: [Post!]! # Not nullable (but empty list is fine) } type Post { id: ID! slug: String! text: String! } type Query { allPersons: [Person!]! personById(id: ID!): Person allPosts: [Post!]! postBySlug(slug: String!): Post } type Mutation { createPost(from: Person!, slug: String!, text: String!): Post! }

Slide 30

Slide 30 text

@glnnrys Resolver

Slide 31

Slide 31 text

@glnnrys (obj, args, context, info) => result;

Slide 32

Slide 32 text

@glnnrys const resolvers = { Query: { personById: (obj, args) => API.getPersonById(args.id), }, Person: { posts: obj => API.getPostsByPersonId(obj.id), // All other fields are resolved by default }, };

Slide 33

Slide 33 text

@glnnrys Apollo Client

Slide 34

Slide 34 text

@glnnrys import ApolloClient from 'apollo-boost'; import { ApolloProvider } from 'react-apollo'; const client = new ApolloClient({ uri: '[MY_GRAPHQL_ENDPOINT]', headers: { // ... }, }); ;

Slide 35

Slide 35 text

@glnnrys Query

Slide 36

Slide 36 text

@glnnrys import gql from 'graphql-tag'; import { Query } from 'react-apollo'; {({ data, loading, error }) => { // ... }} ;

Slide 37

Slide 37 text

@glnnrys Mutation

Slide 38

Slide 38 text

@glnnrys import gql from 'graphql-tag'; import { Mutation } from 'react-apollo'; {}} refetchQueries={[{ query: queryToRefetch, variables: {} }]} awaitRefetchQueries > {mutate => ( // ... )} ;

Slide 39

Slide 39 text

@glnnrys Feedback

Slide 40

Slide 40 text

@glnnrys Thank you!