What is Apollo? Integration with React GraphQL Developers https://selleo.com/graphql-expert-developers-team

1. How to GraphQL: React Apollo
November 14, 2017
Tomasz Bąk
t.bak@selleo.com

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

4. Agenda
What is Apollo?
Integration with React
Workshops

5. 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

6. 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.

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

8. Integration with React
Source: https://www.apollographql.com/docs/react/index.html

9. Write queries, not code
Query

10. Write queries, not code
Component

11. Write queries, not code
View

12. Write queries, not code
Edit

13. 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/

14. Source: https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a

16. 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