Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
React Finland – React & GraphQL – From zero to production
Glenn Reyes
April 24, 2019
Programming
0
55
React Finland – React & GraphQL – From zero to production
Glenn Reyes
April 24, 2019
Tweet
Share
More Decks by Glenn Reyes
See All by Glenn Reyes
glennreyes
0
42
glennreyes
0
40
glennreyes
0
13
glennreyes
1
7
glennreyes
0
42
glennreyes
0
48
glennreyes
0
28
glennreyes
0
54
glennreyes
1
49
Other Decks in Programming
See All in Programming
attsumi
1
350
zsmb
2
110
canon1ky
3
340
hanhan1978
0
290
pdone
0
210
yosuke_furukawa
PRO
13
3.6k
takahi5
0
200
thatjeffsmith
0
320
adoranwodo
0
190
freekmurze
0
190
77web
4
1.4k
makicamel
1
160
Featured
See All Featured
qrush
285
18k
roundedbygravity
84
7.8k
mongodb
23
3.8k
yeseniaperezcruz
302
31k
jrom
114
7.1k
colly
66
3k
trallard
13
640
colly
186
14k
scottboms
251
11k
mojombo
358
62k
jonyablonski
14
1.1k
vanstee
116
4.8k
Transcript
@glnnrys React & GraphQL From zero to production @glnnrys
@glnnrys > whoami
@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
@glnnrys Goals for today
@glnnrys
@glnnrys Learn
@glnnrys Fun
@glnnrys Ship
@glnnrys What is GraphQL?
@glnnrys
@glnnrys Query Language for APIs
@glnnrys
@glnnrys Describe your schema in a type system
@glnnrys type Speaker { id: ID! name: String talks: [Talk]!
} type Talk { id: ID! title: String by: Speaker }
@glnnrys It's language agnostic
@glnnrys
@glnnrys Query IDEs
@glnnrys github.com/graphql/graphiql
@glnnrys github.com/prisma/graphql-playground
@glnnrys Automatic documentation
@glnnrys
@glnnrys
@glnnrys
@glnnrys <Query query={gql` query getUser($id: ID!) { user(id: $id) {
id name bio twitter } } `} variables={{ id: props.id }} > {({ data, error, loading }) => { if (loading) return 'Loading ...'; if (error) return `Something went wrong! ${error.message}`; return <Profile data={data.user} />; }} </Query>
@glnnrys Questions?
@glnnrys Let's get started!
@glnnrys github.com/glennreyes/react-graphql-workshop
@glnnrys Schemas & Types
@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! }
@glnnrys Resolver
@glnnrys (obj, args, context, info) => result;
@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 }, };
@glnnrys Apollo Client
@glnnrys import ApolloClient from 'apollo-boost'; import { ApolloProvider } from
'react-apollo'; const client = new ApolloClient({ uri: '[MY_GRAPHQL_ENDPOINT]', headers: { // ... }, }); <ApolloProvider client={client}> <App /> </ApolloProvider>;
@glnnrys Query
@glnnrys import gql from 'graphql-tag'; import { Query } from
'react-apollo'; <Query query={myQuery}> {({ data, loading, error }) => { // ... }} </Query>;
@glnnrys Mutation
@glnnrys import gql from 'graphql-tag'; import { Mutation } from
'react-apollo'; <Mutation mutation={myMutation} variables={{}} onCompleted={data => {}} refetchQueries={[{ query: queryToRefetch, variables: {} }]} awaitRefetchQueries > {mutate => ( // ... )} </Mutation>;
@glnnrys Feedback
@glnnrys Thank you!