Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Finland – React & GraphQL – From zero to ...

React Finland – React & GraphQL – From zero to production

Glenn Reyes

April 24, 2019
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. @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
  2. @glnnrys type Speaker { id: ID! name: String talks: [Talk]!

    } type Talk { id: ID! title: String by: Speaker }
  3. @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>
  4. @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! }
  5. @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 }, };
  6. @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>;
  7. @glnnrys import gql from 'graphql-tag'; import { Query } from

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

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