fix(package/gqty): rerender after first fetch to refresh isLoading

gqty-dev · Mar 27, 2024 · 41b44e5 · 41b44e5
1 parent 7198c17
commit 41b44e5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/packages/react/src/client.ts b/packages/react/src/client.ts
@@ -38,6 +38,11 @@ import {
 import type { ReactClientOptionsWithDefaults } from './utils';
 
 export interface ReactClientDefaults {
+  /**
+   * The value of $state.isLoading before the first fetch happens, useful
+   * for skipping SSR and hydrations.
+   */
+  initialLoadingState?: boolean;
   /**
    * Enable/Disable by default 'React Suspense' behavior
    *
@@ -185,6 +190,7 @@ export function createReactClient<TSchema extends BaseGeneratedSchema>(
   client: GQtyClient<TSchema>,
   {
     defaults: {
+      initialLoadingState = false,
       suspense = false,
       transactionFetchPolicy = 'cache-first',
       lazyFetchPolicy = 'network-only',
@@ -204,18 +210,19 @@ export function createReactClient<TSchema extends BaseGeneratedSchema>(
   const opts: ReactClientOptionsWithDefaults = {
     ...options,
     defaults: {
-      transactionFetchPolicy,
+      initialLoadingState,
       lazyFetchPolicy,
-      staleWhileRevalidate,
-      suspense,
-      retry,
       lazyQuerySuspense,
-      transactionQuerySuspense,
       mutationSuspense,
-      preparedSuspense,
-      refetchAfterHydrate,
       paginatedQueryFetchPolicy,
       paginatedQuerySuspense,
+      preparedSuspense,
+      refetchAfterHydrate,
+      retry,
+      staleWhileRevalidate,
+      suspense,
+      transactionFetchPolicy,
+      transactionQuerySuspense,
     },
   };
 

diff --git a/packages/react/src/query/useQuery.ts b/packages/react/src/query/useQuery.ts
@@ -90,6 +90,7 @@ export const createUseQuery = <TSchema extends BaseGeneratedSchema>(
   client: GQtyClient<TSchema>,
   {
     defaults: {
+      initialLoadingState: defaultInitialLoadingState,
       suspense: defaultSuspense,
       staleWhileRevalidate: defaultStaleWhileRevalidate,
       retry: defaultRetry,
@@ -111,7 +112,7 @@ export const createUseQuery = <TSchema extends BaseGeneratedSchema>(
     fetchInBackground = false,
     fetchPolicy,
     cachePolicy = translateFetchPolicy(fetchPolicy ?? 'cache-first'),
-    initialLoadingState = false,
+    initialLoadingState = defaultInitialLoadingState,
     suspense = defaultSuspense,
     notifyOnNetworkStatusChange = !suspense,
     onError,
@@ -332,6 +333,8 @@ export const createUseQuery = <TSchema extends BaseGeneratedSchema>(
           context.hasCacheHit = false;
           context.hasCacheMiss = false;
           context.notifyCacheUpdate = cachePolicy !== 'default';
+
+          // Synchronous mutex release, just to be safe.
           state.promise = undefined;
 
           // Release co-fetching context, dropping reference to the last
@@ -343,7 +346,10 @@ export const createUseQuery = <TSchema extends BaseGeneratedSchema>(
           renderSession.set('postFetch', true);
 
           // Trigger a post-fetch render, keeps the error if caught.
-          setState(({ error }) => ({ error }));
+          setState(({ error }) => ({
+            error,
+            promise: undefined,
+          }));
         }
       },
       [