Reach for the Stars with Apollo

React scandalized the JavaScript community by challenging assumptions that co-locating templates and styles within JavaScript violated separation of concerns. This trend continues with Apollo, a full-stack spec compliant implementation of GraphQL built on top of Redux, that positions data requirements alongside view components.

You’re going to come away from this talk with an understanding of GraphQL and why it improves upon REST, how to create an Apollo server that connects to your database, and how to add Apollo to your React components. Apollo simplifies and streamlines the contract between client and server, enabling rapid app development and iteration.

Transcript

1. Reach for the Stars With Apollo hswolff @hswolff
2. GraphQL Apollo Real Life Example
3. Harry Wolff Senior UI Engineer MongoDB Blog hswolff.com Twitter & GitHub @hswolff
4. What is GraphQL?
5. What is GraphQL? Built internally by Facebook Later open-sourced
6. What is GraphQL? Query Language for your API
7. What is GraphQL? Query Language for your API
8. What is GraphQL? Query Language for your API
9. What is GraphQL? Query Language for your API
10. What is GraphQL? Query Language for your API
11. What is GraphQL? Query Language for your API
12. What is GraphQL? Type system creates full schema
13. What is GraphQL? Return data with resolvers
14. What is GraphQL? Runtime for fulfilling those queries with your existing data
15. What is GraphQL? Runtime for fulfilling those queries with your existing data
16. What is GraphQL? Runtime for fulfilling those queries with your existing data
17. GraphiQL Interactive in-browser GraphQL IDE
18. GraphiQL Interactive in-browser GraphQL IDE
19. GraphiQL Interactive in-browser GraphQL IDE
20. GraphiQL Interactive in-browser GraphQL IDE
21. GraphiQL Interactive in-browser GraphQL IDE
22. GraphiQL Interactive in-browser GraphQL IDE
24. GraphQL Libraries Server Client
25. Open Source Project
26. Server graphql-server graphql-tools
27. Server graphql-tools Creates schema from schema language
28. Server graphql-tools
29. Server graphql-tools
30. Server graphql-tools
31. Server graphql-server GraphQL server plugin for Node.js Express, Connect, Hapi, and Koa
32. Server graphql-server
33. Client apollo-client graphql-tag react-apollo angular2-apollo
34. Client apollo-client Makes queries and mutations against your GraphQL server
35. Client
36. Client
37. Client apollo-client Supports query batching Supports query deduplication
38. Client apollo-client Built on top of Redux
39. Client graphql-tag Parses GraphQL queries with template tags
40. Client graphql-tag
41. Client graphql-tag Turns query into the GraphQL Abstract Syntax Tree (AST)
42. Client graphql-tag
43. Client Framework Integrations angular2-apollo Angular react-apollo React
44. react-apollo Similar to react-redux Creates Higher order Component Connects Components to Data
45. react-apollo
46. Real Life Example
54. We’re missing something…
56. Let’s Add Ratings!
68. GraphQL Apollo Real Life Example
69. Resources graphql.org dev.apollodata.com graphqlhub.com graphql-swapi.parseapp.com
70. Reach for the Stars With Apollo hswolff @hswolff Harry Wolff hswolff.com