how to graphql: react apollo
TRANSCRIPT
How to GraphQL: React Apollo November 14, 2017Tomasz Bą[email protected]
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
Agenda
What is Apollo?
Integration with React
Workshops
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
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.
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
Integration with React
Source: https://www.apollographql.com/docs/react/index.html
Write queries, not codeQuery
Write queries, not codeComponent
Write queries, not codeView
Write queries, not codeEdit
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/
Source: https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a
Workshopsgraphql-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