React & GraphQL – From zero to production

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