Relay Modern: the Relay Store
Relay brings a lot of new concepts to the frontend development table.
I'll dig into how Relay Store was designed to make it fast.
Data Fetching before Relay
If you are used to use pure React or Redux or MobX, you are probably used to do all your data fetching logic in an imperative way, getting data from your REST endpoints.
After getting the data from a REST endpoint you need to store it somewhere else.
When using pure React you can start data fetching when the component did mount and store this data on state of the component. This brings a lot of drawbacks:
- You only start data fetching when the component has mounted, causing request waterfalls (read more https://medium.com/@taion/react-routing-and-data-fetching-ec519428135c)
- You need to pass this data as props down to components, when a data requirement of one component in the tree changes, you need to refactor most of the tree that depends on this data (read more here https://reactjs.org/blog/2015/02/20/introducing-relay-and-graphql.html)
When using Redux you going to use redux-thunk or redux-saga to manage data fetching and send an action to update your redux store with new data. If you have a complex domain data app you probably using normalizr to normalize all your entities on redux store. This approach still have some drawbacks:
- You still need to have a lot of boilerplate to do the same data fetching and updating store
- When using normalizr is hard to figure it out how to clean up store, as you need to keep track of which components needs each data and their data dependencies
- You need to use reselect to make sure only components that needs to be rerender will rerender when updating the store.
The Relay Store
The Relay Store is how Relay Modern stores data of all fragments and queries. All records/nodes are "flattened"/normalised in the store, this is why we need a unique and global ID for each record, so we can easily find them on the store.
You can inspect and debug the relay store of your app using Relay Dev — https://github.com/relayjs/relay-devtools, it is available as an electron app and also as a chrome extensions, it is very useful to understand how relay store works and how a mutation updates it.
How to get data from Relay Store
There are 2 ways to get data from a Relay Store:
- Using an ID reference to an object
- Using a GraphQL fragment
React-Redux vs Relay
A container is basically a selector for the store.
What's next?
This is basically how the Relay Store works, there are a lot of cool stuff to uncover about it, like:
- garbage collection strategy
- how it handle client schema extensions data (local only data)
- how to update the store on mutations and subscriptions (more here https://medium.com/entria/wrangling-the-client-store-with-the-relay-modern-updater-function-5c32149a71ac)
- how to optimistic update store before the server returns (check this https://medium.com/entria/relay-modern-optimistic-update-a09ba22d83c9)
- common use cases
- retrieving data imperatively from store
- relay store for offline data.
You can read more about basics of fragments here: https://medium.com/@sibelius/relay-modern-what-is-a-fragment-c70f164c2469
You should also check robrichard talk on data masking here: https://robrichard.net/graphql-europe-2018 and https://facebook.github.io/relay/docs/en/videos.html#graphql-europe-2018-https-wwwgraphql-europeorg.
Thanks for some content by robrichard on this blog post.
If you have any questions about Relay Modern or any other topic, feel free to ping me and DM on twitter https://twitter.com/sseraphini
I'll keep working on Relay Modern blog posts to make it easy to begineers
Newsletter
Subscribe to my newsletter for new content https://sibelius.substack.com/
