After the fact tagging

[Jordaneisenburger]

Goal

We want to tag fetch requests after they have completed, so we can later invalidate or revalidate caches based on those tags. Currently, Next.js only documents how to add tags at request time via fetch(..., { next: { tags } }), rather than post-fetch. The only way to tag a request after it returns is using cacheTag(), but calling cacheTag() requires 'use cache'.

That introduces a problem:

• Marking a function with 'use cache' causes all serializable arguments passed into (or closed over by) that function to become part of the cache key.
• This behavior is problematic for sensitive information like a bearer token—because you either can’t pass it into a 'use cache' function at all, or if you do, it ends up in the cache key.

Why would you want to include a bearer token in a cacheable request?

In an e-commerce scenario, multiple logged-in customers might share the same cache group. Suppose customer A initiates the first request (which isn’t cached) and receives fresh data from Adobe Commerce. Because the data is tied to a particular cache group, future requests for that same group can then be served instantly from the cache. In that initial request, however, a bearer token is typically required for authentication and to associate the response with the correct cache group.

Hence the dilemma:

1. We must send the bearer token for authentication and to tag the response properly.
2. But 'use cache' would capture that token as part of the cache key—which is both a security and a maintainability concern.

This creates a tension between wanting to use cacheTag() (and thus 'use cache') for tagging after a request completes, and needing to supply a bearer token (without making it part of the cache key).

Passing a function to the fetch function as a prop throws this errror: (as also highlighted here: #71859)

Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

As an example, i need below code to not add bearerToken to the cache key

async function userFetch(
    xMagentoCacheId: string | undefined,
    bearerToken?: string,
) {
    async function fetchCachedData(xMagentoCacheId: string | undefined) {
        'use cache';
        const queryParams = xMagentoCacheId ? `?=${xMagentoCacheId}` : '';

        const response = await fetch(
            `https://randomuser.me/api${queryParams}`,
            {
                headers: {
                    Authorization: `Bearer ${bearerToken}`,
                },
            },
        );
        const user = await response.json();
        cacheTag(user.results[0].name.first);
        return user.results[0].name.first;
    }

    return await fetchCachedData(xMagentoCacheId);
}

Would love any pointers on how to tag these requests after the data has been fetched.

Thanks!

[Jordaneisenburger]

Well a patch seems to work, what can go wrong right?

--- a/node_modules/next/dist/esm/server/use-cache/use-cache-wrapper.js
+++ b/node_modules/next/dist/esm/server/use-cache/use-cache-wrapper.js


+            const filteredArgs = args.filter(arg =>
+                // if arg is an object and has the property, filter it out
+                !(typeof arg === 'object' && arg !== null && 'bearerToken' in arg)
+            );
+
             const cacheKeyParts = [
                 buildId,
                 hmrRefreshHash,
                 id,
-                args
+                filteredArgs
             ];