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

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=47 Glenn Reyes
October 10, 2019
Programming
0
17

React & GraphQL – From zero to production

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

October 10, 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
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
React & GraphQL – From zero to production
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
51
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

Other Decks in Programming

See All in Programming
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
00766b8e1f9c2665cf7fd29f9cf558df?s=48 odanado
PRO
0
190
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
430
レビュー駆動学習のススメ_StaPy#83
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
320
Edge Side Frontend という新領域
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
24
10k
SRE NEXT 2022に学ぶこれからのSREキャリア
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
2
400
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
341ac9f717b3904d6674784c0fcd9cf2?s=48 owaspkansai
0
300
読みやすいコード クラスメソッド 2022 年度新卒研修
E86b46be0f4e61db6b28becc5493bbab?s=48 januswel
0
2.9k
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
410
MLOps勉強会_リアルタイムトラフィックのサーバレスMLOps基盤_20220810
7771ba477a3bee861bc62012a143bffe?s=48 strsaito
1
410
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
20220706_Google Apps Scriptを実演で学ぶ～ GAS × Slack ～
C983c1e22d0d19f21590b83884d9b754?s=48 apachan
2
630
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
Dda24cce92447593513292ec748c70c4?s=48 oleindesign
0
110

Featured

See All Featured
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
262
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
13k
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
910
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
87
12k
A Philosophy of Restraint
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
192
15k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
14
3.8k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1.1M

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