Relay Modern: the Relay Store

Relay Dev Tools

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:

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.

https://robrichard.net/graphql-europe-2018/#11

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:

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/

CTO Entria, Feedback House, Log.ID, Brand Lovers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store