Blitz: Add Suspense wrapper to resolve initial error 500

Thanks blitz-js/blitz#4339 (comment)
FixMyBerlin · Oct 15, 2024 · 12bb1e6 · 12bb1e6
1 parent ff5ee9f
commit 12bb1e6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata, Viewport } from 'next'
+import { Suspense } from 'react'
 import SocialSharingImage from 'src/app/_components/layouts/assets/og-image-default.jpg'
 import { BlitzProvider } from 'src/blitz-client'
 import './_components/layouts/global.css'
@@ -43,7 +44,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="de" className="h-full">
       <body className="flex min-h-full w-full text-gray-800 antialiased">
         <BlitzProvider>
-          <div className="relative flex-auto">{children}</div>
+          <Suspense>
+            <div className="relative flex-auto">{children}</div>
+          </Suspense>
         </BlitzProvider>
         <TailwindResponsiveHelper />
       </body>

diff --git a/app/test/utils.tsx b/app/test/utils.tsx
@@ -1,11 +1,12 @@
-import { vi } from "vitest"
-import { render as defaultRender } from "@testing-library/react"
-import { renderHook as defaultRenderHook } from "@testing-library/react-hooks"
-import { NextRouter } from "next/router"
-import { BlitzProvider, RouterContext } from "@blitzjs/next"
-import { QueryClient } from "@blitzjs/rpc"
+import { BlitzProvider, RouterContext } from '@blitzjs/next'
+import { QueryClient } from '@blitzjs/rpc'
+import { render as defaultRender } from '@testing-library/react'
+import { renderHook as defaultRenderHook } from '@testing-library/react-hooks'
+import { NextRouter } from 'next/router'
+import { Suspense } from 'react'
+import { vi } from 'vitest'
 
-export * from "@testing-library/react"
+export * from '@testing-library/react'
 
 // --------------------------------------------------------------------------------
 // This file customizes the render() and renderHook() test functions provided
@@ -31,14 +32,14 @@ export * from "@testing-library/react"
 const queryClient = new QueryClient()
 export function render(
   ui: RenderUI,
-  { wrapper, router, dehydratedState, ...options }: RenderOptions = {}
+  { wrapper, router, dehydratedState, ...options }: RenderOptions = {},
 ) {
   if (!wrapper) {
     // Add a default context wrapper if one isn't supplied from the test
     wrapper = ({ children }: { children: React.ReactNode }) => (
       <BlitzProvider dehydratedState={dehydratedState} client={queryClient}>
         <RouterContext.Provider value={{ ...mockRouter, ...router }}>
-          {children}
+          <Suspense>{children}</Suspense>
         </RouterContext.Provider>
       </BlitzProvider>
     )
@@ -59,14 +60,14 @@ export function render(
 // --------------------------------------------------
 export function renderHook(
   hook: RenderHook,
-  { wrapper, router, dehydratedState, ...options }: RenderOptions = {}
+  { wrapper, router, dehydratedState, ...options }: RenderOptions = {},
 ) {
   if (!wrapper) {
     // Add a default context wrapper if one isn't supplied from the test
     wrapper = ({ children }: { children: React.ReactNode }) => (
       <BlitzProvider dehydratedState={dehydratedState} client={queryClient}>
         <RouterContext.Provider value={{ ...mockRouter, ...router }}>
-          {children}
+          <Suspense>{children}</Suspense>
         </RouterContext.Provider>
       </BlitzProvider>
     )
@@ -75,10 +76,10 @@ export function renderHook(
 }
 
 export const mockRouter: NextRouter = {
-  basePath: "",
-  pathname: "/",
-  route: "/",
-  asPath: "/",
+  basePath: '',
+  pathname: '/',
+  route: '/',
+  asPath: '/',
   query: {},
   isReady: true,
   isLocaleDomain: false,