Hey devs, i implemented a caching mechanism in my app, but i want when new data is added for the system to revalidate the cache.

Cache implementation:

export const getMedia = unstable_cache(
  async () => {
    const payload = await getPayload({
      config: config,
    });

    const media = await payload.find({
      collection: "media",
      depth: 1,
      limit: 500,
    });

    return media;
  },
  ['media-cache'],
  { revalidate: 86400 }
);

For the system to revalidate after content is added or deleted im using the hooks from payload

hooks: {
    afterChange: [
      async () => {
        'use server';
        await revalidateMedia();
      }
    ],
    afterDelete: [
      async () => {
        'use server';
        await revalidateMedia();
      }
    ]
  },

and then this is the function im running revalidateMedia():

export async function revalidateMedia() {
  console.log('detected change in media, waiting 5 seconds before revalidating');
  console.log('5');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('4');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('3');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('2');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('1');
  await new Promise(resolve => setTimeout(resolve, 1000));
  revalidateTag('media-cache');
  console.log('revalidated media cache');
}

After so many tries on debugging this i found an internal variable to debug the cache (NEXT_PRIVATE_DEBUG_CACHE) and i defined it to true.

After that, new things appeared in my terminal:

detected change in media, waiting 5 seconds before revalidating
5
4
3
2
1
revalidated media cache
revalidateTag [ 'media-cache' ]
using filesystem cache handler
revalidateTag []
revalidateTag []
revalidateTag []
using filesystem cache handler
get /catalogo undefined APP_PAGE true