chore(next): warn for missing suspense boundary (#3449)

urql-graphql · Dec 6, 2023 · fa692c1 · fa692c1
1 parent f39165d
commit fa692c1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/.changeset/small-rings-drop.md b/.changeset/small-rings-drop.md
@@ -0,0 +1,5 @@
+---
+'@urql/next': patch
+---
+
+Show a warning when the `Suspense` boundary is missing under the UrqlProvider
diff --git a/packages/next-urql/src/Provider.ts b/packages/next-urql/src/Provider.ts
@@ -9,6 +9,15 @@ export const SSRContext = React.createContext<SSRExchange | undefined>(
   undefined
 );
 
+const SuspenseWarning = () => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      'urql suspended but there was no boundary to catch it, add a <Suspense> component under your urql Provider.'
+    );
+  }
+  return null;
+};
+
 /** Provider for `@urql/next` during non-rsc interactions.
  *
  * @remarks
@@ -59,7 +68,15 @@ export function UrqlProvider({
     React.createElement(
       SSRContext.Provider,
       { value: ssr },
-      React.createElement(DataHydrationContextProvider, { nonce }, children)
+      React.createElement(
+        DataHydrationContextProvider,
+        { nonce },
+        React.createElement(
+          React.Suspense,
+          { fallback: React.createElement(SuspenseWarning) },
+          children
+        )
+      )
     )
   );
 }