[legacy-framework] Deserialize SuperJSON-ed pageProps before passing to dehydratedState

packages/babel-preset/package.json

@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0",
-    "babel-plugin-superjson-next": "0.2.2"
+    "babel-plugin-superjson-next": "0.3.0"
   },
   "devDependencies": {
     "@babel/core": "7.12.10"

packages/babel-preset/src/index.ts

@@ -9,7 +9,13 @@ export default function preset(_api: any, options = {}) {
 
   const config = {
     presets: [[require('next/babel'), options]],
-    plugins: [require('babel-plugin-superjson-next'), AddBlitzAppRoot],
+    plugins: [
+      [
+        require('babel-plugin-superjson-next'),
+        { exclude: ['dehydratedState'] },
+      ],
+      AddBlitzAppRoot,
+    ],
   };
 
   if (!isRunningInJest) {

test/integration/auth/pages/prefetching.tsx

@@ -0,0 +1,52 @@
+import getAuthenticatedBasic from "app/queries/getAuthenticatedBasic"
+import {
+  dehydrate,
+  getQueryKey,
+  GetServerSidePropsContext,
+  invokeWithMiddleware,
+  QueryClient,
+  useQuery,
+} from "blitz"
+import {Suspense, useEffect} from "react"
+
+function Content() {
+  const [result] = useQuery(getAuthenticatedBasic, null, {
+    staleTime: 60 * 1000,
+  })
+
+  return <div id="content">{result}</div>
+}
+
+function Bomb() {
+  useEffect(() => {
+    throw new Error("💣")
+  })
+
+  return <>somebody set up us the bomb</>
+}
+
+export default function Page() {
+  return (
+    <div id="page">
+      <Suspense fallback={<Bomb />}>
+        <Content />
+      </Suspense>
+    </div>
+  )
+}
+
+Page.authenticate = true
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery(getQueryKey(getAuthenticatedBasic, null), () =>
+    invokeWithMiddleware(getAuthenticatedBasic, null, ctx),
+  )
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  }
+}

test/integration/auth/test/index.test.ts

@@ -75,4 +75,27 @@ describe("Auth", () => {
       if (browser) await browser.close()
     })
   })
+
+  describe("prefetching", () => {
+    it("should login successfully", async () => {
+      const browser = await webdriver(context.appPort, "/login")
+      await browser.waitForElementByCss("#content")
+      let text = await browser.elementByCss("#content").text()
+      expect(text).toMatch(/logged-out/)
+      await browser.elementByCss("#login").click()
+      await waitFor(500)
+      text = await browser.elementByCss("#content").text()
+      expect(text).toMatch(/logged-in/)
+
+      if (browser) await browser.close()
+    })
+
+    it("should prefetch from the query cache #2281", async () => {
+      const browser = await webdriver(context.appPort, "/prefetching", true)
+      await browser.waitForElementByCss("#content")
+      const text = await browser.elementByCss("#content").text()
+      expect(text).toMatch(/authenticated-basic-result/)
+      if (browser) await browser.close()
+    })
+  })
 })