SWR doesn't use the cache (so doesn't do the expected stale-while-revalidate)

[MartinGbz]

Hey! 👋

I'm currently digging a bit more on how SWR works and I'm facing to an issue.

From my understanding, useSWR fetch data once and cache it (key => data). Then if you refresh your page OR switch from component and go back to the one before, useSWR will:

• 1: get data from cache and set this data to the data argument of useSWR hook (so your application will display a data instantly (maybe stale, but better than no data)
• 2: at the same time it will revalidate the data to get the latest up to dated data

Am I right?

Because I don't have at all this expected behavior on my app.

Here's a first log I have:

The data is undefined, the cache already has the data (maybe stale, but he has the data), and the useSWR is currently fetching the data (isLoading).

The problem is: Why SWR doesn't set the data (userData) from what he has in the cache?

Because I need to wait the isLoading to be true in order to have my data (userData) not undefined anymore:

I understand why he refetch the data, but don't understand why he doesn't use the existing cache (while the fetch is pending).

So from what I see the "stale-while-revalidate" mechanism seems not to work here.

FYI:

Here's my hook:

  const {
    data: userData,
    error,
    isLoading,
    isValidating,
    mutate,
  } = useSWR(
    account.address ? ["/api/points?address=" + account.address] : null,
    ([url]) => userDataFetcher(url)
  );

Here is my fetcher:

const userDataFetcher = (url: string) =>
  fetch(url).then((res) => res.json() as Promise<UserData>);

Also second (bonus 😅) question:

• I want to optimize my data fetching
• On my backend my data is only updated each day at a specific hour

Is there a way to refetch data only if a specific hour is passed in the day?

Thanks in advance for your answers! 🙏