From 1106f99f332ef6621c41b9bfb9322d698358b75f Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Wed, 6 Dec 2023 16:25:12 +0100
Subject: [PATCH] warn for missing suspense boundary

---
 .changeset/small-rings-drop.md     |  5 +++++
 packages/next-urql/src/Provider.ts | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/small-rings-drop.md

diff --git a/.changeset/small-rings-drop.md b/.changeset/small-rings-drop.md
new file mode 100644
index 0000000000..f49011d735
--- /dev/null
+++ 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
index 135f938447..5407148062 100644
--- 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
+        )
+      )
     )
   );
 }