How to GraphQL: React Apollo
2 likes1,397 views
The document outlines a workshop presentation by Tomasz Bąk on integrating Apollo with React, detailing the Apollo client as a community-driven GraphQL client for JavaScript. Key benefits include reducing frontend data boilerplate, improving performance, and simplifying API evolution. It also discusses the tooling available for both client-side and server-side development with GraphQL.
How to GraphQL: React Apollo
- 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/
- 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