React Finland – React & GraphQL – From zero to production

React Finland – React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

April 24, 2019
Tweet

Transcript

  1. @glnnrys React & GraphQL From zero to production @glnnrys

  2. @glnnrys > whoami

  3. @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
  4. @glnnrys Goals for today

  5. @glnnrys

  6. @glnnrys Learn

  7. @glnnrys Fun

  8. @glnnrys Ship

  9. @glnnrys What is GraphQL?

  10. @glnnrys

  11. @glnnrys Query Language for APIs

  12. @glnnrys

  13. @glnnrys Describe your schema in a type system

  14. @glnnrys type Speaker { id: ID! name: String talks: [Talk]!

    } type Talk { id: ID! title: String by: Speaker }
  15. @glnnrys It's language agnostic

  16. @glnnrys

  17. @glnnrys Query IDEs

  18. @glnnrys github.com/graphql/graphiql

  19. @glnnrys github.com/prisma/graphql-playground

  20. @glnnrys Automatic documentation

  21. @glnnrys

  22. @glnnrys

  23. @glnnrys

  24. @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>
  25. @glnnrys Questions?

  26. @glnnrys Let's get started!

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

  28. @glnnrys Schemas & Types

  29. @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! }
  30. @glnnrys Resolver

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

  32. @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 }, };
  33. @glnnrys Apollo Client

  34. @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>;
  35. @glnnrys Query

  36. @glnnrys import gql from 'graphql-tag'; import { Query } from

    'react-apollo'; <Query query={myQuery}> {({ data, loading, error }) => { // ... }} </Query>;
  37. @glnnrys Mutation

  38. @glnnrys import gql from 'graphql-tag'; import { Mutation } from

    'react-apollo'; <Mutation mutation={myMutation} variables={{}} onCompleted={data => {}} refetchQueries={[{ query: queryToRefetch, variables: {} }]} awaitRefetchQueries > {mutate => ( // ... )} </Mutation>;
  39. @glnnrys Feedback

  40. @glnnrys Thank you!