React Finland – React & GraphQL – From zero to production

@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 <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!

React Finland – React & GraphQL – From zero to production

React Finland – React & GraphQL – From zero to production

More Decks by Glenn Reyes

Other Decks in Programming

Featured

Transcript