Fix get(Static|Initial)Props re-running when updating query (#9907)

* Add failing test for re-calling getStaticProps after updating query * Fix get(Static|Initial)Props re-running when updating query * Update invalid export tests Co-authored-by: Joe Haddad <[email protected]>
vercel · Jan 3, 2020 · ae78e8f · ae78e8f
1 parent c4cf641
commit ae78e8f
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 11 deletions.
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -119,6 +119,7 @@ class Container extends React.Component {
           // client-side hydration. Your app should _never_ use this property.
           // It may change at any time without notice.
           _h: 1,
+          shallow: true,
         }
       )
     }

diff --git a/test/integration/export-serverless/next.config.js b/test/integration/export-serverless/next.config.js
@@ -29,6 +29,7 @@ module.exports = phase => {
           query: { text: 'this file has an extension' },
         },
         '/query': { page: '/query', query: { a: 'blue' } },
+        '/query-update': { page: '/query-update', query: { a: 'blue' } },
         // API route
         '/blog/nextjs/comment/test': { page: '/blog/[post]/comment/[id]' },
       }

diff --git a/test/integration/export-serverless/pages/query-update.js b/test/integration/export-serverless/pages/query-update.js
@@ -0,0 +1,7 @@
+import { useRouter } from 'next/router'
+
+const Page = () => <div id="query">{JSON.stringify(useRouter().query)}</div>
+
+Page.getInitialProps = () => ({ hello: 'world' })
+
+export default Page
diff --git a/test/integration/export-serverless/test/browser.js b/test/integration/export-serverless/test/browser.js
@@ -183,11 +183,10 @@ export default function(context) {
     })
 
     it('should update query after mount', async () => {
-      const browser = await webdriver(context.port, '/query?hello=1')
-
-      await waitFor(1000)
-      const text = await browser.eval('document.body.innerHTML')
-      expect(text).toMatch(/hello/)
+      const browser = await webdriver(context.port, '/query-update?hello=world')
+      await waitFor(2000)
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
     })
 

diff --git a/test/integration/export/next.config.js b/test/integration/export/next.config.js
@@ -34,6 +34,7 @@ module.exports = phase => {
           query: { text: 'this file has an extension' },
         },
         '/query': { page: '/query', query: { a: 'blue' } },
+        '/query-update': { page: '/query-update', query: { a: 'blue' } },
         // API route
         '/blog/nextjs/comment/test': { page: '/blog/[post]/comment/[id]' },
       }

diff --git a/test/integration/export/pages/query-update.js b/test/integration/export/pages/query-update.js
@@ -0,0 +1,7 @@
+import { useRouter } from 'next/router'
+
+const Page = () => <div id="query">{JSON.stringify(useRouter().query)}</div>
+
+Page.getInitialProps = () => ({ hello: 'world' })
+
+export default Page
diff --git a/test/integration/export/test/browser.js b/test/integration/export/test/browser.js
@@ -183,11 +183,10 @@ export default function(context) {
     })
 
     it('should update query after mount', async () => {
-      const browser = await webdriver(context.port, '/query?hello=1')
-
-      await waitFor(1000)
-      const text = await browser.eval('document.body.innerHTML')
-      expect(text).toMatch(/hello/)
+      const browser = await webdriver(context.port, '/query-update?hello=world')
+      await waitFor(2000)
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
     })
 

diff --git a/test/integration/prerender/pages/something.js b/test/integration/prerender/pages/something.js
@@ -20,7 +20,7 @@ export default ({ world, time, params, random }) => {
     <>
       <p>hello: {world}</p>
       <span>time: {time}</span>
-      <div>{random}</div>
+      <div id="random">{random}</div>
       <div id="params">{JSON.stringify(params)}</div>
       <div id="query">{JSON.stringify(useRouter().query)}</div>
       <Link href="/">

diff --git a/test/integration/prerender/test/index.test.js b/test/integration/prerender/test/index.test.js
@@ -340,6 +340,23 @@ const runTests = (dev = false) => {
         await fs.writeFile(indexPage, origContent)
       }
     })
+
+    it('should not re-call getStaticProps when updating query', async () => {
+      const browser = await webdriver(appPort, '/something?hello=world')
+      await waitFor(2000)
+
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world' })
+
+      const {
+        props: {
+          pageProps: { random: initialRandom },
+        },
+      } = await browser.eval('window.__NEXT_DATA__')
+
+      const curRandom = await browser.elementByCss('#random').text()
+      expect(curRandom).toBe(initialRandom + '')
+    })
   } else {
     it('should should use correct caching headers for a no-revalidate page', async () => {
       const initialRes = await fetchViaHTTP(appPort, '/something')