I'm trying to get a handle on unstable_cache to cut down on calls to my Firestore database. I want to fresh the data every so often (say 10 seconds), but the following code doesn't really work.

const getWalk = async (): Promise<Walk> => {
  console.log(`>>> Called getCurrentWalk at ${new Date().toLocaleString()}`);
  const walkRef = collection(firestore, 'walks').withConverter(
    new WalkConverter()
  );
  const walkQuery = query(walkRef, where('isCurrent', '==', 'true'), limit(1));
  const querySnapshot = await getDocs(walkQuery);
  const walk = querySnapshot.docs[0].data();

  return walk;
};

export const getCurrentWalk = unstable_cache(
  async () => getWalk(),
  ['current-walk'],
  {
    tags: ['current-walk'],
    revalidate: 10,
  }
);

Then in my page.tsx I'm calling getCurrentWalk like this:

const walk = await getCurrentWalk();

And outputting some data like

<div>Walk date: {walk.WalkDate}</div>

During the build it will query the database and return data, and I can see that data in my page (e.g. I see something like "Walk date: 5/8/2024"). But after that, if I refresh the page I get no errors, but I get no data either (e.g. I see "Walk date:" with no date). I can see my console.log statement indicating that it does query Firestore again after 10 seconds, but no data is returned (it actually queries the database a bunch of times). I'm sure I'm missing something obvious, but I cannot find it and so far no amount of searching or reading the docs has gotten me to an answer. Thanks!