GraphQL for JS developers

1. @glnnrys · glennreyes.com GraphQL for JS developers
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
6. @glnnrys · glennreyes.com 💡 Learn
7. @glnnrys · glennreyes.com 🤪 Fun
8. @glnnrys · glennreyes.com 🏁 Success!!!
9. @glnnrys · glennreyes.com Agenda 👨🏫 Intro GraphQL core concepts 👩💻 Exercise 💡 Review 🔁 Repeat!
10. @glnnrys · glennreyes.com Agenda 👨🏫 Intro GraphQL core concepts 👩💻 Exercise 💡 Review 🍽 Lunch or ☕ Coffee 🔁 Repeat!
11. @glnnrys · glennreyes.com What is GraphQL?
12. @glnnrys · glennreyes.com Query Language for APIs
13. @glnnrys · glennreyes.com Ask for what you want And get predictable results
14. @glnnrys · glennreyes.com
15. @glnnrys · glennreyes.com A friendly reminder GraphQL is bleeding edge technology
16. @glnnrys · glennreyes.com www.graphql.org
17. @glnnrys · glennreyes.com Describe your data
18. Describe your data
20. User
21. Tweet Tweet
22. User Tweet
23. Describe your data User Tweet
24. Describe your data User Tweet name email username bio age tweets message from
25. @glnnrys · glennreyes.com Describe your Schema in a Type System
26. @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! }
27. @glnnrys · glennreyes.com Int Float String Boolean ID
28. @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 }
29. @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 }
30. @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 }
31. @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 }
32. @glnnrys · glennreyes.com www.graphql.org
33. @glnnrys · glennreyes.com Ask for what you want
34. @glnnrys · glennreyes.com Ask for what you want And get predictable results
35. @glnnrys · glennreyes.com Ask for what you want And get predictable results
36. { 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" ] }
37. { 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
38. { 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
39. { name twitter job } { "name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer" } GraphQL Query JSON
40. @glnnrys · glennreyes.com What is GraphQL?
41. @glnnrys · glennreyes.com Query Language for APIs
42. @glnnrys · glennreyes.com Ask for what you want And get predictable results
43. @glnnrys · glennreyes.com It's Language Agnostic
44. @glnnrys · glennreyes.com
45. @glnnrys · glennreyes.com Why GraphQL?
46. @glnnrys · glennreyes.com GraphQL Architecture
47. @glnnrys · glennreyes.com Servers Clients
48. @glnnrys · glennreyes.com Makes managing data difficult in the frontend Servers Clients
49. @glnnrys · glennreyes.com Servers Clients GraphQL
50. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management for us
51. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL handles data management for us delivers us data exactly as needed
52. @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
53. @glnnrys · glennreyes.com What else?
54. @glnnrys · glennreyes.com Tooling
55. @glnnrys · glennreyes.com Query IDEs
56. @glnnrys · glennreyes.com github.com/graphql/graphiql
57. @glnnrys · glennreyes.com github.com/prisma/graphql-playground
58. @glnnrys · glennreyes.com Automatic Documentation
59. @glnnrys · glennreyes.com
60. @glnnrys · glennreyes.com Query-driven schema design
61. @glnnrys · glennreyes.com Design your schema based on how data is used not based on how it's stored
62. mutation { updateUserBio(input: UpdateUserBioInput): UpdateUserBioPayload }
63. @glnnrys · glennreyes.com Questions?
64. @glnnrys · glennreyes.com Let's get started!
65. @glnnrys · glennreyes.com github.com/glennreyes/graphql-workshop