How to GraphQL: React Apollo
-
Upload
tomasz-bak -
Category
Software
-
view
178 -
download
0
Transcript of How to GraphQL: React Apollo
![Page 1: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/1.jpg)
How to GraphQL: React Apollo November 14, 2017Tomasz Bą[email protected]
![Page 2: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/2.jpg)
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
![Page 3: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/3.jpg)
![Page 4: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/4.jpg)
Agenda
What is Apollo?
Integration with React
Workshops
![Page 5: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/5.jpg)
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
![Page 6: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/6.jpg)
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.
![Page 7: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/7.jpg)
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
![Page 8: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/8.jpg)
Integration with React
Source: https://www.apollographql.com/docs/react/index.html
![Page 9: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/9.jpg)
Write queries, not codeQuery
![Page 10: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/10.jpg)
Write queries, not codeComponent
![Page 11: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/11.jpg)
Write queries, not codeView
![Page 12: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/12.jpg)
Write queries, not codeEdit
![Page 13: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/13.jpg)
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/
![Page 14: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/14.jpg)
Source: https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a
![Page 15: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/15.jpg)
![Page 16: How to GraphQL: React Apollo](https://reader034.fdocuments.us/reader034/viewer/2022050803/5a6d78a47f8b9af2418b570d/html5/thumbnails/16.jpg)
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