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

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=47 Glenn Reyes
September 26, 2019
48

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

September 26, 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 www.graphql.org

  13. @glnnrys · glennreyes.com Describe your data

  14. Describe your data

  15. None
  16. User

  17. Tweet Tweet

  18. User Tweet

  19. Describe your data User Tweet

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

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

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

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

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

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

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


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

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

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

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


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

  40. @glnnrys · glennreyes.com

  41. @glnnrys · glennreyes.com Why GraphQL?

  42. @glnnrys · glennreyes.com GraphQL Architecture

  43. @glnnrys · glennreyes.com Servers Clients

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

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

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

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

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

  50. @glnnrys · glennreyes.com Tooling

  51. @glnnrys · glennreyes.com Query IDEs

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

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

  54. @glnnrys · glennreyes.com Automatic Documentation

  55. @glnnrys · glennreyes.com

  56. @glnnrys · glennreyes.com

  57. @glnnrys · glennreyes.com

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

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

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

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