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 www.graphql.org
13. @glnnrys · glennreyes.com Describe your data
14. Describe your data
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