Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to GraphQL: React Apollo

689 views

Published on

What is Apollo? Integration with React

GraphQL Developers https://selleo.com/graphql-expert-developers-team

Published in: Software
  • Be the first to comment

How to GraphQL: React Apollo

  1. 1. How to GraphQL: React Apollo November 14, 2017 Tomasz Bąk t.bak@selleo.com
  2. 2. About me ● software developer and architect, speaker, trainer ○ 12+ years of experience ○ 4+ years senior frontend developer ■ Ember, Angular, React ● co-founder of selleo.com ● http://selleo.com/people/tomasz-bak
  3. 3. Agenda What is Apollo? Integration with React Workshops
  4. 4. What is Apollo? Source: https://www.slideshare.net/reactconfbr/sashko-stubailo-the-graph-ql-and-apollo-stack-connecting-everything-together Client-side tooling ● Apollo Client ● Dev tools ● apollo-codegen ● eslint-plugin-graphql Server-side tooling ● Graphql-tools ○ Schema creation ○ Mocking ○ Stitching ● Apollo Server ● Apollo Optics A set of projects designed to leverage GraphQL
  5. 5. What is Apollo Client? Source: https://www.apollographql.com/client/ Community driven GraphQL client for JavaScript and native platforms Bind GraphQL data to your UI with one function call.
  6. 6. Key concepts of the Apollo Client Source: https://www.apollographql.com/docs/react/index.html ● Incrementally adoptable ● Universally compatible ● Simple to get started with ● Inspectable and understandable ● Built for interactive apps ● Community driven
  7. 7. Integration with React Source: https://www.apollographql.com/docs/react/index.html
  8. 8. Write queries, not code Query
  9. 9. Write queries, not code Component
  10. 10. Write queries, not code View
  11. 11. Write queries, not code Edit
  12. 12. The benefits ● Eliminate frontend data boilerplate ● Pull complexity out of the client ● Improve performance ● Incrementally evolve your API ● Types and validation across the stack Source: https://www.apollographql.com/
  13. 13. Source: https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a
  14. 14. Workshops graphql-ruby (~908k total downloads) react-apollo (~267k downloads in the last month) ● Based on classic Northwind sample database ● Best Practices, TDD ● Signup, Signin ● Dashboard with charts ● CRUD, validations ● Nested objects ● Filtering and sorting listings

×