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

React & GraphQL – From zero to production

Glenn Reyes
September 26, 2019
65

React & GraphQL – From zero to production

Glenn Reyes

September 26, 2019
Tweet

Transcript

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

    View Slide

  2. @glnnrys · glennreyes.com
    > whoami

    View Slide

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

    View Slide

  4. @glnnrys · glennreyes.com
    Goals
    for today

    View Slide

  5. @glnnrys · glennreyes.com
    Learn

    View Slide

  6. @glnnrys · glennreyes.com
    Fun

    View Slide

  7. @glnnrys · glennreyes.com
    Ship

    View Slide

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

    View Slide

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

    View Slide

  10. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View Slide

  11. @glnnrys · glennreyes.com

    View Slide

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

    View Slide

  13. @glnnrys · glennreyes.com
    Describe your data

    View Slide

  14. Describe your data

    View Slide

  15. View Slide

  16. User

    View Slide

  17. Tweet
    Tweet

    View Slide

  18. User
    Tweet

    View Slide

  19. Describe your data
    User Tweet

    View Slide

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

    View Slide

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

    View Slide

  22. @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 Slide

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

    View Slide

  24. @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 Slide

  25. @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 Slide

  26. @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 Slide

  27. @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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View Slide

  32. {
    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 Slide

  33. {
    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 Slide

  34. {
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. @glnnrys · glennreyes.com
    Ask for

    what you want
    And get

    predictable results

    View Slide

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

    View Slide

  40. @glnnrys · glennreyes.com

    View Slide

  41. @glnnrys · glennreyes.com
    Why GraphQL?

    View Slide

  42. @glnnrys · glennreyes.com
    GraphQL
    Architecture

    View Slide

  43. @glnnrys · glennreyes.com
    Servers
    Clients

    View Slide

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

    in the frontend
    Servers
    Clients

    View Slide

  45. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL

    View Slide

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

    handles data management for us

    View Slide

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

    handles data management for us
    delivers us data exactly as needed

    View Slide

  48. @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 Slide

  49. @glnnrys · glennreyes.com
    What else?

    View Slide

  50. @glnnrys · glennreyes.com
    Tooling

    View Slide

  51. @glnnrys · glennreyes.com
    Query IDEs

    View Slide

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

    View Slide

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

    View Slide

  54. @glnnrys · glennreyes.com
    Automatic
    Documentation

    View Slide

  55. @glnnrys · glennreyes.com

    View Slide

  56. @glnnrys · glennreyes.com

    View Slide

  57. @glnnrys · glennreyes.com

    View Slide

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

    View Slide

  59. @glnnrys · glennreyes.com
    Questions?

    View Slide

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

    View Slide

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

    View Slide