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

React & GraphQL – From zero to production

Glenn Reyes
September 26, 2019
72

React & GraphQL – From zero to production

Glenn Reyes

September 26, 2019
Tweet

Transcript

  1. @glnnrys · glennreyes.com
    React & GraphQL
    From zero to production

    View full-size slide

  2. @glnnrys · glennreyes.com
    > whoami

    View full-size slide

  3. @glnnrys · glennreyes.com
    Glenn Reyes
    Independent Software Engineer

    View full-size slide

  4. @glnnrys · glennreyes.com
    Goals
    for today

    View full-size slide

  5. @glnnrys · glennreyes.com
    Learn

    View full-size slide

  6. @glnnrys · glennreyes.com
    Fun

    View full-size slide

  7. @glnnrys · glennreyes.com
    Ship

    View full-size slide

  8. @glnnrys · glennreyes.com
    What is GraphQL?

    View full-size slide

  9. @glnnrys · glennreyes.com
    Query Language for APIs

    View full-size slide

  10. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View full-size slide

  11. @glnnrys · glennreyes.com

    View full-size slide

  12. @glnnrys · glennreyes.com
    www.graphql.org

    View full-size slide

  13. @glnnrys · glennreyes.com
    Describe your data

    View full-size slide

  14. Describe your data

    View full-size slide

  15. Describe your data
    User Tweet

    View full-size slide

  16. Describe your data
    User Tweet
    name
    email
    username
    bio
    age
    tweets
    message
    from

    View full-size slide

  17. @glnnrys · glennreyes.com
    Describe your
    Schema in a Type System

    View full-size slide

  18. @glnnrys · glennreyes.com
    type Tweet {
    id: ID!
    message: String!
    from: User
    }
    type User {
    name: String!
    email: String!
    bio: String
    age: Int
    tweets: [Tweet!]!
    username: String!
    }

    View full-size slide

  19. @glnnrys · glennreyes.com
    Int
    Float
    String
    Boolean
    ID

    View full-size slide

  20. @glnnrys · glennreyes.com
    type Query {
    getUser(email: String!): User!
    getTweets(username: String!): [Tweet!]!
    }
    type Mutation {
    createTweet: Tweet
    deleteTweet(id: ID!): Tweet
    updateTweet(id: ID!): Tweet
    }

    View full-size slide

  21. @glnnrys · glennreyes.com
    # GET something
    type Query {
    getUser(email: String!): User!
    getTweets(username: String!): [Tweet!]!
    }
    # DO something
    type Mutation {
    createTweet: Tweet
    deleteTweet(id: ID!): Tweet
    updateTweet(id: ID!): Tweet
    }

    View full-size slide

  22. @glnnrys · glennreyes.com
    # GET something
    type Query {
    # Get a user by the email adress
    getUser(email: String!): User!
    # Get tweets
    getTweets(username: String!): [Tweet!]!
    }
    # DO something
    type Mutation {
    createTweet: Tweet
    deleteTweet(id: ID!): Tweet
    updateTweet(id: ID!): Tweet
    }

    View full-size slide

  23. @glnnrys · glennreyes.com
    type Tweet {
    id: ID!
    message: String!
    from: User
    }
    type User {
    name: String!
    email: String!
    bio: String
    age: Int
    tweets: [Tweet!]!
    username: String!
    }
    type Query {
    getUser(email: String!): User!
    getTweets(username: String!): [Tweet!]!
    }
    type Mutation {
    createTweet: Tweet
    deleteTweet(id: ID!): Tweet
    updateTweet(id: ID!): Tweet
    }

    View full-size slide

  24. @glnnrys · glennreyes.com
    www.graphql.org

    View full-size slide

  25. @glnnrys · glennreyes.com
    Ask for what you want

    View full-size slide

  26. @glnnrys · glennreyes.com
    Ask for what you want
    And get predictable results

    View full-size slide

  27. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View full-size slide

  28. {
    name
    twitter
    job
    expertise
    oss(type: "most-popular")
    elseIDo
    }
    {
    "name": "Glenn Reyes",
    "twitter": "@glnnrys",
    "job": "Independent Software Engineer",
    "expertise": ["React", "GraphQL"],
    "oss": ["graphpack", "react-countup"],
    "elseIDo": [
    "Co-organize React Vienna",
    "Speak at conferences",
    "Give workshops"
    ]
    }

    View full-size slide

  29. {
    name
    twitter
    job
    expertise
    oss(type: "most-popular")
    elseIDo
    }
    {
    "name": "Glenn Reyes",
    "twitter": "@glnnrys",
    "job": "Independent Software Engineer",
    "expertise": ["React", "GraphQL"],
    "oss": ["graphpack", "react-countup"],
    "elseIDo": [
    "Co-organize React Vienna",
    "Speak at conferences",
    "Give workshops"
    ]
    }
    GraphQL Query JSON

    View full-size slide

  30. {
    name
    twitter
    job
    expertise
    oss(type: "most-popular")
    elseIDo
    }
    {
    "name": "Glenn Reyes",
    "twitter": "@glnnrys",
    "job": "Independent Software Engineer",
    "expertise": ["React", "GraphQL"],
    "oss": ["graphpack", "react-countup"],
    "elseIDo": [
    "Co-organize React Vienna",
    "Speak at conferences",
    "Give workshops"
    ]
    }
    GraphQL Query JSON

    View full-size slide

  31. {
    name
    twitter
    job
    }
    {
    "name": "Glenn Reyes",
    "twitter": "@glnnrys",
    "job": "Independent Software Engineer"
    }
    GraphQL Query JSON

    View full-size slide

  32. @glnnrys · glennreyes.com
    What is GraphQL?

    View full-size slide

  33. @glnnrys · glennreyes.com
    Query Language for APIs

    View full-size slide

  34. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View full-size slide

  35. @glnnrys · glennreyes.com
    It's
    Language Agnostic

    View full-size slide

  36. @glnnrys · glennreyes.com

    View full-size slide

  37. @glnnrys · glennreyes.com
    Why GraphQL?

    View full-size slide

  38. @glnnrys · glennreyes.com
    GraphQL
    Architecture

    View full-size slide

  39. @glnnrys · glennreyes.com
    Servers
    Clients

    View full-size slide

  40. @glnnrys · glennreyes.com
    Makes managing data difficult

    in the frontend
    Servers
    Clients

    View full-size slide

  41. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL

    View full-size slide

  42. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    GraphQL

    handles data management for us

    View full-size slide

  43. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    GraphQL

    handles data management for us
    delivers us data exactly as needed

    View full-size slide

  44. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    GraphQL

    handles data management for us
    delivers us data exactly as needed
    let's us focus on the frontend

    View full-size slide

  45. @glnnrys · glennreyes.com
    What else?

    View full-size slide

  46. @glnnrys · glennreyes.com
    Tooling

    View full-size slide

  47. @glnnrys · glennreyes.com
    Query IDEs

    View full-size slide

  48. @glnnrys · glennreyes.com
    github.com/graphql/graphiql

    View full-size slide

  49. @glnnrys · glennreyes.com
    github.com/prisma/graphql-playground

    View full-size slide

  50. @glnnrys · glennreyes.com
    Automatic
    Documentation

    View full-size slide

  51. @glnnrys · glennreyes.com

    View full-size slide

  52. @glnnrys · glennreyes.com

    View full-size slide

  53. @glnnrys · glennreyes.com

    View full-size slide

  54. @glnnrys · glennreyes.com
    const MyProfile = () => {
    const { data, loading } = useQuery(gql`
    {
    name
    email
    bio
    }
    `);
    if (loading) {
    return 'Loading ...';
    }
    return ;
    };

    View full-size slide

  55. @glnnrys · glennreyes.com
    Questions?

    View full-size slide

  56. @glnnrys · glennreyes.com
    Let's get started!

    View full-size slide

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

    View full-size slide