Pre-cache a Remote Query Function while still using "network first" fetch when going to a route that uses it

[dimfeld]

My app needs to have some pieces of data available offline even if the user hasn't gone to a route that actually needs it yet.

Specifically, what I want to do is prefetch certain remote query functions up front when the app loads, so that later if the user is offline, the app will already have those functions' data loaded in the service worker cache even if they haven't gone to a relevant route.

I've tried calling the query function in the root +layout.ts, which works fine for the initial load. But then the query is "active" for the entire lifetime of the app. This means that whenever you go to a route that needs the data, you won't get fresh data because it will just use the value in Svelte's cache.

Here are some possible solutions I've thought of. I think only the last one is actually doable right now though.

• a way to call a remote query function in a one-off fashion that doesn't start tracking it as active. Something like untrack(() => getData()) or getData.fetchOnce()
• A way to inspect the remote function without actually instantiating it and get the key/path, which I can then fetch myself so the service worker will cache it. (Assume for now all these functions have no arguments so the url is easy to replicate)
• a way for the service worker to know how to build a URL that corresponds to a particular remote function
• Explicitly calling refresh on mount for each page that use one of these queries. I think this should work now, but it's error-prone.

Is there some way to accomplish this?

[dimfeld]

Actually I just had an idea to use an "offline loader" component which I can instantiate when the app loads and then tear itself down after the data finishes loading. Some way to to this more elegantly would be nice but I think that should solve it.

[dimfeld]

proof of concept of that idea, seems to work great https://gist.github.com/dimfeld/f51a31a80d41727fe5de97ca10dc5df3

• Load the query when the apps starts
• Refresh it periodically on a slow basis (e.g. every 60 minutes)
• But still fetch again any time I go to a route that uses it