GraphQL for JS developers

Transcript

1. @glnnrys · glennreyes.com
   GraphQL
   for JS developers
   

   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
   

   View Slide

6. @glnnrys · glennreyes.com
   💡 Learn
   

   View Slide

7. @glnnrys · glennreyes.com
   🤪 Fun
   

   View Slide

8. @glnnrys · glennreyes.com
   🏁 Success!!!
   

   View Slide

9. @glnnrys · glennreyes.com
   Agenda
   👨🏫 Intro GraphQL core concepts
   
   
   👩💻 Exercise
   
   
   💡 Review
   
   
   🔁 Repeat!
   

   View Slide

10. @glnnrys · glennreyes.com
    Agenda
    👨🏫 Intro GraphQL core concepts
    
    
    👩💻 Exercise
    
    
    💡 Review
    
    
    🍽 Lunch or ☕ Coffee
    
    
    🔁 Repeat!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. @glnnrys · glennreyes.com
    

    View Slide

15. @glnnrys · glennreyes.com
    A friendly reminder
    
    
    GraphQL is bleeding edge
    technology
    

    View Slide

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

    View Slide

17. @glnnrys · glennreyes.com
    Describe your data
    

    View Slide

18. Describe your data
    

    View Slide

19. View Slide

20. User
    

    View Slide

21. Tweet
    Tweet
    

    View Slide

22. User
    Tweet
    

    View Slide

23. Describe your data
    User Tweet
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

28. @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

29. @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

30. @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

31. @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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. {
    
    
    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

37. {
    
    
    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

38. {
    
    
    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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. @glnnrys · glennreyes.com
    

    View Slide

45. @glnnrys · glennreyes.com
    Why GraphQL?
    

    View Slide

46. @glnnrys · glennreyes.com
    GraphQL
    
    
    Architecture
    

    View Slide

47. @glnnrys · glennreyes.com
    Servers
    Clients
    

    View Slide

48. @glnnrys · glennreyes.com
    Makes managing data difficult
    in the frontend
    Servers
    Clients
    

    View Slide

49. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    

    View Slide

50. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    GraphQL
    handles data management for us
    

    View Slide

51. @glnnrys · glennreyes.com
    Servers
    Clients
    GraphQL
    GraphQL
    handles data management for us
    
    
    delivers us data exactly as needed
    

    View Slide

52. @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

53. @glnnrys · glennreyes.com
    What else?
    

    View Slide

54. @glnnrys · glennreyes.com
    Tooling
    

    View Slide

55. @glnnrys · glennreyes.com
    Query IDEs
    

    View Slide

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

    View Slide

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

    View Slide

58. @glnnrys · glennreyes.com
    Automatic
    Documentation
    

    View Slide

59. @glnnrys · glennreyes.com
    

    View Slide

60. @glnnrys · glennreyes.com
    Query-driven
    schema design
    

    View Slide

61. @glnnrys · glennreyes.com
    Design your schema based on how data is used
    
    
    not based on how it's stored
    

    View Slide

62. mutation {
    
    
    updateUserBio(input: UpdateUserBioInput): UpdateUserBioPayload
    
    
    }
    

    View Slide

63. @glnnrys · glennreyes.com
    Questions?
    

    View Slide

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

    View Slide

65. @glnnrys · glennreyes.com
    github.com/glennreyes/graphql-workshop
    

    View Slide