Reach for the Stars with Apollo

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.

F863e9eb811851834773398e72614dc1?s=128

Harry Wolff

January 18, 2017
Tweet

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

  23. None
  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

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. We’re missing something…

  55. None
  56. Let’s Add Ratings!

  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  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