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
0
51

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

September 26, 2019
Tweet

More Decks by Glenn Reyes

See All by Glenn Reyes
Building modern React applications
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
71
Drawing the line between 3rd party and custom code
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
70
React & GraphQL – From zero to production
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
17
Drawing the line betweek 3rd party and custom code
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
1
14
Building modern React applications
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
46
UpLeveled___GraphQL_for_JS_developers.pdf
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
34
Drawing the line between 3rd party and handcrafted code
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
69
React Finland – React & GraphQL – From zero to production
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
66
With great power comes great React Hooks!
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
1
51

Featured

See All Featured
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
290k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenintech
48
2.6k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
57
5.4k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
980
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1.1M
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k

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