Fix revalidateTag with fetch and "use cache"

packages/next/src/server/lib/patch-fetch.ts

@@ -270,6 +270,14 @@ export function createPatchedFetcher(
                 collectedTags.push(tag)
               }
             }
+
+            // Add tags of the current cache scope to the locally collected tags
+            // for this fetch call.
+            for (const tag of collectedTags) {
+              if (!tags.includes(tag)) {
+                tags.push(tag)
+              }
+            }
           }
         }
 

test/e2e/app-dir/use-cache/app/cache-tag/button.tsx

@@ -1,36 +1,36 @@
-'use client'
-import { useRouter } from 'next/navigation'
 import React from 'react'
-import { revalidateWithTag } from './actions'
+import { revalidateTag } from 'next/cache'
 
 export function RevalidateButtons() {
-  const router = useRouter()
   return (
-    <>
+    <form>
       <button
         id="revalidate-a"
-        onClick={() => {
-          revalidateWithTag('a').then(() => router.refresh())
+        formAction={async () => {
+          'use server'
+          revalidateTag('a')
         }}
       >
         revalidate a
       </button>
       <button
         id="revalidate-b"
-        onClick={() => {
-          revalidateWithTag('b').then(() => router.refresh())
+        formAction={async () => {
+          'use server'
+          revalidateTag('b')
         }}
       >
         revalidate b
       </button>
       <button
         id="revalidate-c"
-        onClick={() => {
-          revalidateWithTag('c').then(() => router.refresh())
+        formAction={async () => {
+          'use server'
+          revalidateTag('c')
         }}
       >
         revalidate c
       </button>
-    </>
+    </form>
   )
 }

test/e2e/app-dir/use-cache/app/cache-tag/page.tsx

@@ -2,22 +2,28 @@ import React from 'react'
 import { unstable_cacheTag as cacheTag } from 'next/cache'
 import { RevalidateButtons } from './button'
 
-async function getCachedWithTag(tag) {
+async function getCachedWithTag(tag: string) {
   'use cache'
   cacheTag(tag, 'c')
-  return Math.random()
+
+  const response = await fetch(
+    `https://next-data-api-endpoint.vercel.app/api/random?tag=${tag}`
+  )
+
+  return response.text()
 }
 
 export default async function Page() {
   const x = await getCachedWithTag('a')
   const y = await getCachedWithTag('b')
+
   return (
-    <p>
+    <div>
       <p id="x">{x}</p>
       <br />
       <p id="y">{y}</p>
       <br />
       <RevalidateButtons />
-    </p>
+    </div>
   )
 }

test/e2e/app-dir/use-cache/use-cache.test.ts

@@ -131,7 +131,7 @@ describe('use-cache', () => {
     expect(rand1).toEqual(rand2)
   })
 
-  it('should cache results for cached funtions imported from client components', async () => {
+  it('should cache results for cached functions imported from client components', async () => {
     const browser = await next.browser('/imported-from-client')
     expect(await browser.elementByCss('p').text()).toBe('0 0 0')
     await browser.elementById('submit-button').click()
@@ -153,7 +153,7 @@ describe('use-cache', () => {
     })
   })
 
-  it('should cache results for cached funtions passed client components', async () => {
+  it('should cache results for cached functions passed to client components', async () => {
     const browser = await next.browser('/passed-to-client')
     expect(await browser.elementByCss('p').text()).toBe('0 0 0')
     await browser.elementById('submit-button').click()
@@ -182,19 +182,21 @@ describe('use-cache', () => {
 
       const initialX = await browser.elementByCss('#x').text()
       const initialY = await browser.elementByCss('#y').text()
-      let updatedX
-      let updatedY
+      let updatedX: string | undefined
+      let updatedY: string | undefined
 
       await browser.elementByCss('#revalidate-a').click()
       await retry(async () => {
         updatedX = await browser.elementByCss('#x').text()
         expect(updatedX).not.toBe(initialX)
+        expect(await browser.elementByCss('#y').text()).toBe(initialY)
       })
 
       await browser.elementByCss('#revalidate-b').click()
       await retry(async () => {
         updatedY = await browser.elementByCss('#y').text()
         expect(updatedY).not.toBe(initialY)
+        expect(await browser.elementByCss('#x').text()).toBe(updatedX)
       })
 
       await browser.elementByCss('#revalidate-c').click()
@@ -242,7 +244,7 @@ describe('use-cache', () => {
     })
   })
 
-  it('should be able to revalidate a page using', async () => {
+  it('should be able to revalidate a page using revalidateTag', async () => {
     const browser = await next.browser(`/form`)
     const time1 = await browser.waitForElementByCss('#t').text()