Deserialize SuperJSON-ed pageProps before passing to dehydratedState (#…

…2281) Co-authored-by: Jeremy Liberman <[email protected]> Co-authored-by: Brandon Bayer <[email protected]> (patch)
blitz-js · May 10, 2021 · cf428bb · cf428bb
1 parent 2ff44aa
commit cf428bb
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 10 deletions.
diff --git a/packages/babel-preset/package.json b/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"

diff --git a/packages/babel-preset/src/index.ts b/packages/babel-preset/src/index.ts
@@ -1,3 +1,4 @@
+import type { TransformOptions } from '@babel/core';
 import AddBlitzAppRoot from './add-blitz-app-root';
 import RewriteImports from './rewrite-imports';
 
@@ -7,13 +8,19 @@ export default function preset(_api: any, options = {}) {
   const isRunningInJest =
     process.env.JEST_WORKER_ID && !process.env.__NEXT_TEST_MODE;
 
-  const config = {
+  const config: TransformOptions = {
     presets: [[require('next/babel'), options]],
-    plugins: [require('babel-plugin-superjson-next'), AddBlitzAppRoot],
+    plugins: [
+      [
+        require('babel-plugin-superjson-next'),
+        { exclude: ['dehydratedState'] },
+      ],
+      AddBlitzAppRoot,
+    ],
   };
 
   if (!isRunningInJest) {
-    config.plugins.push(RewriteImports);
+    config.plugins!.push(RewriteImports);
   }
 
   return config;

diff --git a/test/integration/auth/pages/prefetching.tsx b/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),
+    },
+  }
+}
diff --git a/test/integration/auth/test/index.test.ts b/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()
+    })
+  })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -280,6 +280,13 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
+"@babel/helper-module-imports@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
+  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
+  dependencies:
+    "@babel/types" "^7.13.12"
+
 "@babel/helper-module-transforms@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
@@ -403,6 +410,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
+  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f"
@@ -1304,6 +1316,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.13.12", "@babel/types@^7.13.17":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"
+  integrity sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.13.13":
   version "7.13.14"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.14.tgz#c35a4abb15c7cd45a2746d78ab328e362cbace0d"
@@ -5798,13 +5818,13 @@ [email protected]:
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
 
-babel-plugin-superjson-next@0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.2.2.tgz#7b2c8133c4c60260de3e83589e5d3707d8f1478a"
-  integrity sha512-baf+zAWlZrGfHIOsqef/HIuhBW0sN+bFaONvEfkSOZy2Ho/o3BM4lvVC53i9pqxnGUM922HFEAUpYaLop5SW4Q==
+babel-plugin-superjson-next@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.3.0.tgz#86620a2d134a1b0a515d903512cf7f766b394cc1"
+  integrity sha512-fTE8uWUy9OJG7PkRNP094XDdieoBsZR2iatxurbNqLyd4INXpwuuQ246iLu4+dAeQHtGhOJZxsPR8KdbNvdnlQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/types" "^7.12.17"
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/types" "^7.13.17"
     hoist-non-react-statics "^3.3.2"
 
 [email protected], babel-plugin-syntax-jsx@^6.18.0: