Caching based on the return value of cachedFunction

[jelmerdemaat]

Describe the feature

Hi! Is it possible to do something like this?

export const cachedGHStars = defineCachedFunction(async (repo: string) => {
  const data: any = await $fetch(`https://api.github.com/repos/${repo}`)
		.then(res => {
			if (!res.ok) {
				// do not cache, we only want valid response data
			}
		});

  if (data.stargazers_count < 50) {
    // do not cache, we only want to cache above 50 items
  } 

 // only here we want to cache the result and return it
  return data.stargazers_count
})

So I would like to decide to cache (true or false) inside the defineCachedFunction function, based on the return status / value.

Additional information

• Would you be willing to help implement this feature?

[pi0]

You might try with validate option:

export const cachedGHStars = defineCachedFunction(
  async (repo: string) => {
    // ...
  },
  {
    validate(entry) {
      return entry.value > 50;
    }
  }
);

BTW please notice that this method, still costs API calls + cache read MISS for small star counts, I think probably it is best to avoid partially invalidating some responses.

[pi0]

No, because there is an internal validation for events (responses with 500 error for example are not catchable). you need to use a composed cached function.

[drewbaker]

"internal validation for events" is that explained anywhere? How should I set these error codes in my cache function?

Because, currently I'm seeing error messages being cached. So would love to know how to not have defineCachedEventHandler not cache based on the result of the function.

[jelmerdemaat]

@drewbaker In my experience, responses statusses in range of 400 (401, 403, 404, etc) will get cached. This is why I have made a custom composed cached event handler function.

[drewbaker]

Yeah caching 400 codes is super annoying. Why would you want a cached not authenticated for example.

This helped me at least change the error codes to 500 on my responses, which aren’t cached.

nuxt/nuxt#16908

[jelmerdemaat]

@drewbaker You can also make your custom event handler like so:

export function defineCustomEventHandler<T extends EventHandlerRequest, D>(
	handler: CustomEventHandler<T, D>,
) {
	return defineEventHandler(async (event) => {
		setResponseHeader(event, 'X-Nuxt-Cache', 'MISS');

		// Some custom function to to retrieve from cache based on the event
		const cachedResult = await getCachedResult(event);

		if (cachedResult) {
			// Apply logic here to do extra things like (stale while) revalidating

			setResponseHeader(event, 'X-Nuxt-Cache', 'HIT');

			return cachedResult;
		}

		const result = await handler(event);

		// Apply some logic to detect errors:
		if (!result || result instanceof Error || result.status >= 400) {
			// Do not cache and just return the result
			return result;
		}

		// From here on, cache the result with custom logic
		saveToCache(event, result);
		
		return result;
	}
}

// Usage inside a server file
export default defineCustomEventHandler(async (event) => {
	const result = $fetch("https://api-that-returns-maybe-404.com/api");

	return result;
});