Preload strategies on React Native

[araujobarret]

Prefetching with preload feature

Context

At Artsy, we're trying to increase the prefetching in our App. We implemented a custom behavior based on fetchQuery, but it's not as solid as Relay's preloaded queries.

Problem

We want to be able to use preload more extensively, especially before navigating somewhere in the app. The combo of grabbing a query reference via loadQuery works but requires us to store unserialized data(query ref) somewhere so the next screen can use usePreloadedQuery. This has been challenging because react-navigation, for instance, doesn't recommend passing unserialized data from one screen to another, and this is also related to a bigger problem within deep links where you don't have the opportunity to preload any stuff(theoretically) before landing on a screen.

Summary

We're looking for some ways that enable us to use preload more extensively in React Native apps, especially given the limitation of passing unserializable data from one place to another and deep links functionality, any ideas would be welcome 🙇

[Asymons]

Hi @araujobarret! Really appreciate you asking a question here. It's great that you're already considering preloading to optimize for UX.

Have you guys tried using the relay store? You can preload before navigation, toss it into your data store and then fetch it from cache with the default fetch policy. https://relay.dev/docs/guided-tour/reusing-cached-data/fetch-policies/. This avoids passing any data between screens that are fetched from your DB (other than maybe something like an ID if you click on an image).

Deep links I'm afraid you're out of luck, you'll need to eat the loading cost if the store is out of date (most likely will be).

LMK if this will work.