Match data fetch and busting cache key when path URI encodes

vercel · Aug 18, 2022 · ed1c2fe · ed1c2fe
1 parent 3466862
commit ed1c2fe
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts
@@ -2015,6 +2015,7 @@ export default class Router implements BaseRouter {
             : await fetchNextData({
                 dataHref: this.pageLoader.getDataHref({
                   href: formatWithValidation({ pathname, query }),
+                  skipInterpolation: true,
                   asPath: resolvedAs,
                   locale,
                 }),

diff --git a/test/e2e/dynamic-route-interpolation/index.test.ts b/test/e2e/dynamic-route-interpolation/index.test.ts
@@ -2,6 +2,7 @@ import { createNext } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
 import cheerio from 'cheerio'
+import webdriver from 'next-webdriver'
 
 describe('Dynamic Route Interpolation', () => {
   let next: NextInstance
@@ -10,22 +11,31 @@ describe('Dynamic Route Interpolation', () => {
     next = await createNext({
       files: {
         'pages/blog/[slug].js': `
+          import Link from "next/link"
+          import { useRouter } from "next/router"
+
           export function getServerSideProps({ params }) {
-            return { props: { slug: params.slug } }
+            return { props: { slug: params.slug, now: Date.now() } }
           }
 
           export default function Page(props) { 
-            return <p id="slug">{props.slug}</p>
+            const router = useRouter()
+            return (
+              <div>
+                <p id="slug">{props.slug}</p>
+                <Link href={router.asPath}>
+                  <a id="now">{props.now}</a>
+                </Link>
+              </div>
+            )
           }
-
         `,
 
         'pages/api/dynamic/[slug].js': `
           export default function Page(req, res) { 
             const { slug } = req.query
             res.end('slug: ' + slug)
           }
-
         `,
       },
       dependencies: {},
@@ -60,4 +70,22 @@ describe('Dynamic Route Interpolation', () => {
     const text = await renderViaHTTP(next.url, '/api/dynamic/[abc]')
     expect(text).toBe('slug: [abc]')
   })
+
+  it('should bust data cache', async () => {
+    const browser = await webdriver(next.url, '/blog/login')
+    await browser.elementById('now').click() // fetch data once
+    const text = await browser.elementById('now').text()
+    await browser.elementById('now').click() // fetch data again
+    await browser.waitForElementByCss(`#now:not(:text("${text}"))`, 100)
+    await browser.close()
+  })
+
+  it('should bust data cache with symbol', async () => {
+    const browser = await webdriver(next.url, '/blog/@login')
+    await browser.elementById('now').click() // fetch data once
+    const text = await browser.elementById('now').text()
+    await browser.elementById('now').click() // fetch data again
+    await browser.waitForElementByCss(`#now:not(:text("${text}"))`, 100)
+    await browser.close()
+  })
 })