useSWR returns undefined when preload fails

[AndonMitev]

So I have a component with effect that prefetches few lists:

 useEffect(() => {
    preload(`casts-${filter}`, () => fetchCastsWithFilterActionV2({ filter }));
    router.prefetch(label.toLowerCase());
  }, []);

fetchCastsWithFilterActionV2 - simple fetch from nextjs

then in list component i have:

const { data: casts } = useSWR(`casts-${filter}`, () =>
    fetchCastsWithFilterActionV2({ filter }), { }
  );

That reads the data but sometimes this data comes as undefined not every time tho.

Sometime i can observe is that if i use only:

const { data: casts } = useSWR(`casts-${filter}`, () =>
  fetchCastsWithFilterActionV2({ filter }), { }
);

data is fetched every time successfully.

In my app i have table with 5 filters - 5 different lists which i'm trying to preload. I think that if any of the lists has not been preloaded:

const { data: casts } = useSWR(`casts-${filter}`, () =>
    fetchCastsWithFilterActionV2({ filter }), { }
  );

will return undefined? Is this assumption correct?

Is it possible somehow to force useSWR if preload has not completed to triggers fetch? Also is there what i can do to make sure that preload can be executed successfully and navigation is not going to disturb them?

[koba04]

I might not fully understand your question, but preload starts fetching the request, but doesn't wait to finish the request, so the subsequent useSWR call still might return undefined even if you call preload before. If you want to guarantee the preload request has been finished when useSWR is called, you have to await the prealod.

preload(`casts-${filter}`, () => fetchCastsWithFilterActionV2({ filter }));

[AndonMitev]

I see thanks a lot? Is there are a way so. i need to preload 5 requests:

• preload first and render the data and then preload rest of em in the background?