Relay Local State Management: Replacing Redux

Since Relay Modern release in 2017, it supports an extensible Client Schema, which allows Local State Management from data that only belongs to client side. In this presentation we're going to discuss how to do such implementation and what comes next.

Transcript

1. Relay Local State Management: Replacing Redux Relay Local State Management: Replacing Redux React Floripa
2. Joao Marins @jgcmarins
3. Topics - What’s Relay? - Query - Mutation - commitMutation - commitLocalUpdate - Local Schema - Real Scenario - What’s next? PS: This presentation does not cover discussion about Relay vs Apollo.
4. Relay https://github.com/facebook/relay - GraphQL Client - Data fetch problem - State management - Collocation - Compile queries
5. Query
6. Mutation
7. commitMutation
8. commitLocalUpdate
9. Local Schema
10. Client Schema
11. Local State “Amongst the shrouds of the Relay source code, there are many a treasure to be found. One of these treasures is rumoured to be none other, than local state.” Benjamin A. Bangsund
12. clientSchema.graphql
13. commiLocalUpdate + clientSchema.graphql
14. Real scenario
15. User Location clientSchema.graphql
16. UserLocation.tsx: Collocation + Fetch - We can use this component on every place we want to render user location. - We could save more info besides lat and lng, like place, street, zipcode and so on. - We should add a comparison logic with location saved on Relay Store before fetch Google again.
17. What’s Next?
18. Offline First Apps https://github.com/morrys/wora
19. References - https://relay.dev - https://github.com/facebook/relay/issues/1656 - https://babangsund.com/relay_local_state_management - https://babangsund.com/relay_local_state_management_2 - https://github.com/facebook/relay/pull/2821 - https://github.com/babangsund/react-relay-local-query - https://github.com/morrys/wora
20. Thanks We’re hiring!