Do preloaded resources not get cached in v2.0.0?

[n-pandey-f5]

I am trying to use the docs to prefetch data and show. When I run the preload function inside my Component's useEffect, it fetches the data but for some reason is not caching it.

I have the SWR devtools installed and they show nothing was cached, or any history of an api request being sent.

I am calling this,

preload<Response>('my-endpoint', myFetcher)

Could you provide some guidance as to why this would be happening?

[koba04]

We don't store the preload result in the cache store that you can see on the devtool. But the preload result is cached in another cache store and is used as the response for the same key of fetcher requests.

[n-pandey-f5]

Thank you for your prompt response. Unfortunately, I am unable to see the preloaded response being used when I call the same key again using useSwr in a different component after navigating to that page using react-router.

It works perfectly fine when I call the same key useSwr in a third component, it uses the cached data but unfortunately in the case of preloaded data with the same key, useSwr does not get the same key data from a cache. I tried console logging the isLoading in that case and it returns true which I think is an indication of the same.

[koba04]

When you call preload, useSWR uses the Promise that the preload fetcher returns, which means isLoading is true until the Promise has been resolved. That's the different behavior with having the cache data.
You can see that your preload request is reused and only one request is going by seeing the network panel in your browser.

[n-pandey-f5]

Ok. To understand it better, after my preload request and I wait for it to finish on the page. Then, I go to the next page which uses useSwr with the same key as preload. Then,

• Only one network request should have been made
• isLoading should be false on every run of the component rendering
• data should have some data always.

What I am seeing is,

• Only one network request should have been made
• isLoading is true on the first run of the component and in the subsequent render it is false
• data is undefined on first run of the component and in the subsequent render there is data.

[koba04]

Yes, that's the expected behavior.
preload caches Promise, which means we cannot get the preload result synchronously even if the cached Promise has already been resolved because we cannot get the resolved value synchronously from Promise.

You can imagine the implementation of preload like this.

// This is not the actual implementation.
const cache = new Map();
const preload = (key, fetcher) => {
  const promise = fetcher(key);
  cache.set(key, promise);
}
const fetcherWithPreload = (key, fetcher) => {
  if (cache.has(key)) {
    // This returns Promise
    return cache.get(key);
  }
  return fetcher(key);
}

[SeanDunford]

@koba04 - is there any way to access the prefetch cache before calling useSwr? I have a component that's using websockets to update data but i would like to initialize the data with data from prefetch cache but i'm not sure if it's accessible.

https://codesandbox.io/s/swr-playground-forked-ngkssr?file=/src/index.js:0-908
In this example i'd ideally like to replace cache.get(page2url) with prefetchCache.get(page2url)

Thanks.

[joelstein]

I'm also using react-router and SWR's preload. I was surprised that this doesn't behave as I expected:

// In route definition...
loader: () => preload("/users", fetcher),

// In component...
const {data: users} = useSWR("/users", fetcher);

The component data is undefined at first, I guess, because the useSWR hook didn't grab the preloaded data or something.

FWIW, this approach works:

// In component...
const {data: users} = useSWR("/users", fetcher, {fallbackData: useLoaderData()});