Preloading queries in Relay — optimise your app without React Suspense

As we explained on a previous blog, we’re big fans of Relay here at Finimize. It allows us to easily fetch, cache and distribute data for our mobile app screens.

Haven’t heard of Finimize? Check out our mobile apps (🍏, 🤖), and even get £20 off a premium subscription, right here.

There are some exciting features that are currently in Relay Experimental mode. Generally these take advantage of React’s experimental Concurrency and Suspense modes, and they present some exciting new possibilities for better patterns in web and mobile apps.

One of these patterns proposed by React Suspense is “render as you fetch”.

In this blog, we’ll show you how we implemented this using existing production-ready Relay tools, without the (currently) experimental preloadQuery.

But first….what does this allow us to do?

Up until now, Relay (and most data fetching frameworks) will fetch the data for a screen (or page) when you start to render that screen. This means the time taken to render each screen can be illustrated as:

Between each screen, we fetch the data from the server, which means we need to show placeholders while we get the data

With preloadQuery, we can start fetching the query when it looks like we might enter that screen, or at the start of our app. This means that when we actually render it, the query will be at least partially fetched — reducing overall time:

Prefetching allows us to form a speedy, seamless experience for the user

Some exciting possibilities for using preload query include:

• prefetching the data for an app home screen as soon as the app boots up (our use-case)
• firing the query on button click (or when we enter a react-navigation nav route), so it can fetch while we animate the transition to a screen
• prefetching the data for a web-app onMouseEnter of a button (next.js offers something similar here)

So — how can we do it?

It turns out we can achieve something similar to preloadQuery with any version of Relay. This will allow you to optimise now - without waiting for React Suspense to become stable. See the function below.

Prefetch a relay query, and add it to the store, so we can access it everywhere

Using this function, you can now imperatively call a particular query from anywhere in your codebase, and have the data available everywhere! ✨

We then like to export our query from our component file, and use a query renderer as follows.

This shows an example (magical 🧙‍♂️) home screen, and how we fetch data with our query renderer

So then we can prefetch the data as follows, before our home screen.

Prefetch the home screen data imperatively, so it’ll be readily accessible in the relay store, for when we need it

Notice that we’ve used useStoreOrNetwork in the first example. This maps to the store-or-network relay fetch policy. This will show what’s in the store (i.e. what we fetched earlier) if it’s available, or else it’ll fetch the data we need.

We could even save this extra query by using the cache-only option from the react-relay-offline library.

Hopefully now you’ve seen how you can work with Relay to improve your data-fetching — and that you don’t need to wait for React’s Concurrency and Suspense modes to become stable to reap the rewards. Thanks for checking us out — and stay tuned for more exciting engineering blog posts, straight from the Finimize HQ!

🎧 Audio more your thing? Always thought about building that podcasting app for dogs? 🐕

📻 Check out our other blog post around how to build a global media player in React Native — and keep those dogs happy!

Don’t forget to check out Finimize to start improving your financial wellness, and carve your own path to financial freedom. Remember to check out our mobile apps (🍏, 🤖), and even get £20 off a premium subscription, right here.