(react/preact) - Fix suspense-ssr runs (#1138)

* fix suspense-ssr runs * Update .changeset/cool-news-buy.md Co-authored-by: Phil Pluckthun <[email protected]> Co-authored-by: Phil Pluckthun <[email protected]>
urql-graphql · Nov 8, 2020 · bba7aec · bba7aec
1 parent 93d8df7
commit bba7aec
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/.changeset/cool-news-buy.md b/.changeset/cool-news-buy.md
@@ -0,0 +1,6 @@
+---
+'@urql/preact': patch
+'urql': patch
+---
+
+Fix server-side rendering by disabling the new Suspense cache on the server-side and clear it for prepasses.
diff --git a/packages/preact-urql/src/hooks/useQuery.ts b/packages/preact-urql/src/hooks/useQuery.ts
@@ -108,6 +108,7 @@ export function useQuery<Data = any, Variables = object>(
       let source: Source<OperationResult> | void = suspense
         ? sources.get(request.key)
         : undefined;
+
       if (!source) {
         source = client.executeQuery(request, {
           requestPolicy: args.requestPolicy,
@@ -117,8 +118,12 @@ export function useQuery<Data = any, Variables = object>(
         });
 
         // Create a suspense source and cache it for the given request
-        if (suspense)
-          sources.set(request.key, (source = toSuspenseSource(source)));
+        if (suspense) {
+          source = toSuspenseSource(source);
+          if (typeof window !== 'undefined') {
+            sources.set(request.key, source);
+          }
+        }
       }
 
       return source;
@@ -182,6 +187,7 @@ export function useQuery<Data = any, Variables = object>(
   }, [update, client, query$, request, args.context]);
 
   if (isSuspense(client, args.context)) {
+    sources.delete(request.key); // Delete any cached suspense source
     update(query$);
   }
 

diff --git a/packages/react-urql/src/hooks/useQuery.ts b/packages/react-urql/src/hooks/useQuery.ts
@@ -108,6 +108,7 @@ export function useQuery<Data = any, Variables = object>(
       let source: Source<OperationResult> | void = suspense
         ? sources.get(request.key)
         : undefined;
+
       if (!source) {
         source = client.executeQuery(request, {
           requestPolicy: args.requestPolicy,
@@ -117,8 +118,12 @@ export function useQuery<Data = any, Variables = object>(
         });
 
         // Create a suspense source and cache it for the given request
-        if (suspense)
-          sources.set(request.key, (source = toSuspenseSource(source)));
+        if (suspense) {
+          source = toSuspenseSource(source);
+          if (typeof window !== 'undefined') {
+            sources.set(request.key, source);
+          }
+        }
       }
 
       return source;
@@ -182,6 +187,7 @@ export function useQuery<Data = any, Variables = object>(
   }, [update, client, query$, request, args.context]);
 
   if (isSuspense(client, args.context)) {
+    sources.delete(request.key); // Delete any cached suspense source
     update(query$);
   }