React & GraphQL – From zero to production

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