Is there any way to ignore useRevalidator() (on interval) failure?

[itayperry]

Hi,
I have this small and simple component and I use it as a dashboard for a user.

export default function VehicleDataPage() {
  const { stats } = useLoaderData() as {
    // more stuff
    stats: Promise<Statistics>;
  };
  const revalidator = useRevalidator();
  useEffect(() => {
    const timerId = setInterval(() => {
      if (revalidator.state === "idle") {
        revalidator.revalidate();
      }
    }, 30_000);
    return () => {
      clearInterval(timerId);
    };
  }, [revalidator]);

  return (
    <>
      <Suspense fallback={<VehicleStatsSkeleton />}>
        <Await resolve={stats}>{(data) => <VehicleStats stats={data} />}</Await>
      </Suspense>
      {revalidator.state === "loading" && <p>Data is revalidating...</p>}

    </>
  );
}

The component data refreshes every 30 seconds, but if it fails I wish to keep showing users the old data which is already there (with a tiny message maybe, that the data is stale) because the next request might succeed.

What should I do? Am I using perhaps the wrong method for this kind of task?

I'd love for some help/tips 😊 please

[brophdawg11]

Right now I think the best way to do this would be to leverage a small client side cache of loader data you could return if the fetch fails. You would probably then want to clear the cache when the route component unmounts from a useEffect cleanup method so that you are guaranteed to get fresh data when coming back to that route.

async function loader() {
  try {
    // Always try to get latest and stick it in a cache
    let data = await fetchData();
    cache.set(key, data);
    return data;
  } catch (e) {
    let data = cache.get(data);
    if (data) {
      // If our fetch failed but we have stale data, use it
      return data;
    }
    // Otherwise re-throw the error to trigger the ErrorBoundary
    throw e;
  }
}

[itayperry]

Interesting, thank you! I really feel like I probably need a React Query or something.
When I show the user the old data, I also wish to show them some note/message/color so that they'll know that it's stale.
That's another thing that's missing.

[brophdawg11]

If you need to indicate when data is stale, you know that information in your loader and could return { isStale: true, data }.