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

React & GraphQL – From zero to production

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

October 10, 2019
Tweet

Transcript

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

  2. @glnnrys · glennreyes.com > whoami

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

  4. @glnnrys · glennreyes.com Goals for today

  5. @glnnrys · glennreyes.com Learn

  6. @glnnrys · glennreyes.com Fun

  7. @glnnrys · glennreyes.com Ship

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

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

  10. @glnnrys · glennreyes.com Ask for what you want And get

    predictable results
  11. @glnnrys · glennreyes.com

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

    technology
  13. @glnnrys · glennreyes.com www.graphql.org

  14. @glnnrys · glennreyes.com Describe your data

  15. Describe your data

  16. None
  17. User

  18. Tweet Tweet

  19. User Tweet

  20. Describe your data User Tweet

  21. Describe your data User Tweet name email username bio age

    tweets message from
  22. @glnnrys · glennreyes.com Describe your Schema in a Type System

  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! }
  24. @glnnrys · glennreyes.com Int Float String Boolean ID

  25. @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 }
  26. @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 }
  27. @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 }
  28. @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 }
  29. @glnnrys · glennreyes.com www.graphql.org

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

  31. @glnnrys · glennreyes.com Ask for what you want And get

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

    predictable results
  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" ] }
  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
  35. { 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
  36. { name twitter job } { "name": "Glenn Reyes", "twitter":

    "@glnnrys", "job": "Independent Software Engineer" } GraphQL Query JSON
  37. @glnnrys · glennreyes.com What is GraphQL?

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

  39. @glnnrys · glennreyes.com Ask for what you want And get

    predictable results
  40. @glnnrys · glennreyes.com It's Language Agnostic

  41. @glnnrys · glennreyes.com

  42. @glnnrys · glennreyes.com Why GraphQL?

  43. @glnnrys · glennreyes.com GraphQL Architecture

  44. @glnnrys · glennreyes.com Servers Clients

  45. @glnnrys · glennreyes.com Makes managing data difficult in the frontend

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

  47. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management

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

    for us delivers us data exactly as needed
  49. @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
  50. @glnnrys · glennreyes.com What else?

  51. @glnnrys · glennreyes.com Tooling

  52. @glnnrys · glennreyes.com Query IDEs

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

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

  55. @glnnrys · glennreyes.com Automatic Documentation

  56. @glnnrys · glennreyes.com

  57. @glnnrys · glennreyes.com

  58. @glnnrys · glennreyes.com

  59. @glnnrys · glennreyes.com const MyProfile = () => { const

    { data, loading } = useQuery(gql` { name email bio } `); if (loading) { return 'Loading ...'; } return <ProfilePage data={data} />; };
  60. @glnnrys · glennreyes.com Questions?

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

  62. @glnnrys · glennreyes.com github.com/glennreyes/react-graphql-workshop/tree/webcamp-zagreb-2019