From 17f8336d1f26636d4efe48d5bf682bbe18d35efa Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Tue, 23 Apr 2024 14:51:54 +0200
Subject: [PATCH] resolve promise

---
 .../with-defer-stream-directives/src/App.jsx    |  4 +++-
 .../with-defer-stream-directives/src/Songs.jsx  |  6 ++++++
 packages/react-urql/src/hooks/cache.ts          | 10 +++++++++-
 packages/react-urql/src/hooks/useFragment.ts    | 17 ++++++++++++++++-
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/examples/with-defer-stream-directives/src/App.jsx b/examples/with-defer-stream-directives/src/App.jsx
index 3e29e59ded..4043a89ca1 100644
--- a/examples/with-defer-stream-directives/src/App.jsx
+++ b/examples/with-defer-stream-directives/src/App.jsx
@@ -21,7 +21,9 @@ const client = new Client({
 function App() {
   return (
     <Provider value={client}>
-      <Songs />
+      <React.Suspense fallback={<p>Loading...</p>}>
+        <Songs />
+      </React.Suspense>
     </Provider>
   );
 }
diff --git a/examples/with-defer-stream-directives/src/Songs.jsx b/examples/with-defer-stream-directives/src/Songs.jsx
index a61b02a2ed..cd5dfb202d 100644
--- a/examples/with-defer-stream-directives/src/Songs.jsx
+++ b/examples/with-defer-stream-directives/src/Songs.jsx
@@ -13,6 +13,9 @@ const SONGS_QUERY = gql`
       firstVerse
       ...secondVerseFields @defer
     }
+    alphabet @stream(initialCount: 3) {
+      char
+    }
   }
 
   ${SecondVerseFragment}
@@ -50,6 +53,9 @@ const LocationsList = () => {
       {data && (
         <>
           <Song song={data.song} />
+          {data.alphabet.map(i => (
+            <div key={i.char}>{i.char}</div>
+          ))}
         </>
       )}
     </div>
diff --git a/packages/react-urql/src/hooks/cache.ts b/packages/react-urql/src/hooks/cache.ts
index db6ddc3b77..52a162d181 100644
--- a/packages/react-urql/src/hooks/cache.ts
+++ b/packages/react-urql/src/hooks/cache.ts
@@ -1,7 +1,15 @@
 import { pipe, subscribe } from 'wonka';
 import type { Client, OperationResult } from '@urql/core';
 
-type CacheEntry = OperationResult | Promise<unknown> | undefined;
+export type FragmentPromise = Promise<unknown> & {
+  _resolve: () => void;
+  _resolved: boolean;
+};
+type CacheEntry =
+  | OperationResult
+  | Promise<unknown>
+  | FragmentPromise
+  | undefined;
 
 interface Cache {
   get(key: number): CacheEntry;
diff --git a/packages/react-urql/src/hooks/useFragment.ts b/packages/react-urql/src/hooks/useFragment.ts
index e612110c79..cb598cd994 100644
--- a/packages/react-urql/src/hooks/useFragment.ts
+++ b/packages/react-urql/src/hooks/useFragment.ts
@@ -19,6 +19,7 @@ import type {
 
 import { useClient } from '../context';
 import { useRequest } from './useRequest';
+import type { FragmentPromise } from './cache';
 import { getCacheForClient } from './cache';
 
 import { hasDepsChanged } from './state';
@@ -172,7 +173,12 @@ export function useFragment<Data>(
           cache.set(request.key, newResult.data as any);
           return { data: newResult.data as any, fetching: false };
         } else if (suspense) {
-          const promise = new Promise(() => {});
+          let _resolve;
+          const promise = new Promise(res => {
+            _resolve = res;
+          }) as FragmentPromise;
+          promise._resolve = _resolve;
+          promise._resolved = false;
           cache.set(request.key, promise);
           throw promise;
         } else {
@@ -182,6 +188,15 @@ export function useFragment<Data>(
         throw cached;
       }
 
+      if (
+        '_resolve' in cached &&
+        '_resolved' in cached &&
+        !cached._resolved &&
+        typeof cached._resolve == 'function'
+      ) {
+        cached._resolve();
+        cached._resolved = true;
+      }
       return { fetching: false, data: (cached as OperationResult).data };
     },
     [cache, request]