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
13

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
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
42
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
40
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
1
7
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
42
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
48
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
28
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
55
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
0
55
3261558e341cf0c94af163c3a0f06ad9?s=48 glennreyes
1
49

Other Decks in Programming

See All in Programming
B5582ce2d9959dfcff0384a07003e188?s=48 mackee
0
560
123f264bb3f071d7422c4ca8e83f27a8?s=48 antonshilov
1
110
Fb469a72f1b12726aea391f479dc1b6d?s=48 gernotstarke
0
380
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
1
190
6a1345d8e6dd15b2c78eff0c331963b1?s=48 dbrumann
0
110
738a5b16d0ce1046be8d0a5e10573fd7?s=48 emmaglorypraise
0
130
3c86b5e68b972038efd6c5cd1553d46b?s=48 sters
2
130
C5c09bfd9ee31f5aef8ce257643d50ea?s=48 takapy
0
100
14c9795d267f5b85abb98ca5e8780646?s=48 ntaro
0
160
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
170
97a42cc1630ebdfdaaa8d50078a9fd3d?s=48 koheisakata
0
100
06cd0c34899f8d878d44074d52ccd4e6?s=48 selcukusta
1
110

Featured

See All Featured
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
810
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.4k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.6k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.6k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
38
2.3k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
257
36k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.2k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k

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