feat(persistQueryClient): PersistQueryClientProvider

make sure we do not subscribe if the component unmounts before restoring has finished

Author: TkDodo

src/persistQueryClient/PersistQueryClientProvider.tsx

@@ -21,17 +21,14 @@ export const PersistQueryClientProvider = ({
   const [isHydrating, setIsHydrating] = React.useState(true)
   const options = React.useRef(persistOptions)
   React.useEffect(() => {
-    let unsubscribe: (() => void) | undefined
+    const [unsubscribe, promise] = persistQueryClient({
+      ...options.current,
+      queryClient: client,
+    })
 
-    async function run() {
-      unsubscribe = await persistQueryClient({
-        ...options.current,
-        queryClient: client,
-      })
+    promise.then(() => {
       setIsHydrating(false)
-    }
-
-    void run()
+    })
 
     return unsubscribe
   }, [client])

src/persistQueryClient/persist.ts

@@ -129,14 +129,26 @@ export function persistQueryClientSubscribe(
 
 /**
  * Restores persisted data to QueryCache and persists further changes.
- * (Retained for backwards compatibility)
  */
-export async function persistQueryClient(props: PersistQueryClientOptions) {
+export function persistQueryClient(
+  props: PersistQueryClientOptions
+): [() => void, Promise<void>] {
+  let hasUnsubscribed = false
+  let unsubscribe = () => {
+    hasUnsubscribed = true
+  }
+
+  let restorePromise = Promise.resolve()
+
   if (typeof window !== 'undefined') {
     // Attempt restore
-    await persistQueryClientRestore(props)
-
-    // Subscribe to changes in the query cache to trigger the save
-    return persistQueryClientSubscribe(props)
+    restorePromise = persistQueryClientRestore(props).then(() => {
+      if (!hasUnsubscribed) {
+        // Subscribe to changes in the query cache to trigger the save
+        unsubscribe = persistQueryClientSubscribe(props)
+      }
+    })
   }
+
+  return [unsubscribe, restorePromise]
 }