Feature/use queries suspense

docs/src/pages/reference/useQueries.md

@@ -12,6 +12,8 @@ const results = useQueries([
 ])
 ```
 
+Note that if _any_ query in the array of query option objects is configured with `suspense: true` or `useQueryBoundary: true`, that configuration will apply to _all_ queries handled by that `useQueries` hook.
+
 **Options**
 
 The `useQueries` hook accepts an array with query option objects identical to the [`useQuery` hook](/reference/useQuery).

src/core/queriesObserver.ts

@@ -1,12 +1,20 @@
 import { difference, replaceAt } from './utils'
 import { notifyManager } from './notifyManager'
-import type { QueryObserverOptions, QueryObserverResult } from './types'
+import type {
+  QueryObserverOptions,
+  QueryObserverResult,
+  RefetchOptions,
+} from './types'
 import type { QueryClient } from './queryClient'
 import { NotifyOptions, QueryObserver } from './queryObserver'
 import { Subscribable } from './subscribable'
 
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
 
+interface QueriesRefetchOptions extends RefetchOptions {
+  filter: (observer: QueryObserver) => boolean
+}
+
 export class QueriesObserver extends Subscribable<QueriesObserverListener> {
   private client: QueryClient
   private result: QueryObserverResult[]
@@ -63,6 +71,16 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     return this.result
   }
 
+  refetch(options?: QueriesRefetchOptions): Promise<QueryObserverResult[]> {
+    let observers = this.observers
+
+    if (options?.filter) {
+      observers = this.observers.filter(options.filter)
+    }
+
+    return Promise.all(observers.map(observer => observer.refetch(options)))
+  }
+
   getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
     return queries.map((options, index) => {
       const defaultedOptions = this.client.defaultQueryObserverOptions(options)

src/react/tests/useQueries.test.tsx

@@ -1,8 +1,23 @@
-import { waitFor } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 
-import { queryKey, renderWithClient, setActTimeout, sleep } from './utils'
-import { useQueries, QueryClient, UseQueryResult, QueryCache } from '../..'
+import {
+  mockConsoleError,
+  queryKey,
+  renderWithClient,
+  setActTimeout,
+  sleep,
+} from './utils'
+import {
+  useQueries,
+  QueryClient,
+  UseQueryResult,
+  QueryCache,
+  useQueryErrorResetBoundary,
+  useQueryClient,
+} from '../..'
+import { QueryState } from '../../core/query'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -25,7 +40,7 @@ describe('useQueries', () => {
         {
           queryKey: key2,
           queryFn: async () => {
-            await sleep(10)
+            await sleep(7)
             return 2
           },
         },
@@ -36,14 +51,145 @@ describe('useQueries', () => {
 
     renderWithClient(queryClient, <Page />)
 
-    await sleep(30)
+    await sleep(10)
 
     expect(results.length).toBe(3)
     expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])
     expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }])
     expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
   })
 
+  it('should return the correct states with suspense', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: (QueryState<unknown, undefined>[] | UseQueryResult[])[] = []
+
+    function Fallback() {
+      const qc = useQueryClient()
+      const queryStates = [qc.getQueryState(key1)!, qc.getQueryState(key2)!]
+
+      results.push(queryStates)
+
+      return null
+    }
+
+    function Page() {
+      const result = useQueries([
+        {
+          queryKey: key1,
+          queryFn: async () => {
+            await sleep(5)
+            return 1
+          },
+          suspense: true,
+        },
+        {
+          queryKey: key2,
+          queryFn: async () => {
+            await sleep(7)
+            return 2
+          },
+        },
+      ])
+      results.push(result)
+      return null
+    }
+
+    renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<Fallback />}>
+        <Page />
+      </React.Suspense>
+    )
+
+    await waitFor(() => {
+      expect(results[0]).toMatchObject([
+        { data: undefined },
+        { data: undefined },
+      ])
+      expect(results[1]).toMatchObject([{ data: 1 }, { data: 2 }])
+      expect(results.length).toBe(2)
+    })
+  })
+
+  it('should retry fetch if the reset error boundary has been reset with global hook', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    let succeed = false
+    const consoleMock = mockConsoleError()
+
+    function Page() {
+      const results = useQueries([
+        {
+          queryKey: key1,
+          queryFn: async () => {
+            await sleep(5)
+            if (!succeed) {
+              throw new Error('Suspense Error Bingo')
+            } else {
+              return 'data1'
+            }
+          },
+          retry: false,
+          suspense: true,
+        },
+        {
+          queryKey: key2,
+          queryFn: () => 'data2',
+          staleTime: Infinity,
+        },
+      ])
+
+      return (
+        <div>
+          <div>data1: {results[0]?.data}</div>
+          <div>data2: {results[1]?.data}</div>
+        </div>
+      )
+    }
+
+    function App() {
+      const { reset } = useQueryErrorResetBoundary()
+      return (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={({ resetErrorBoundary }) => (
+            <div>
+              <div>error boundary</div>
+              <button
+                onClick={() => {
+                  resetErrorBoundary()
+                }}
+              >
+                retry
+              </button>
+            </div>
+          )}
+        >
+          <React.Suspense fallback="Loading...">
+            <Page />
+          </React.Suspense>
+        </ErrorBoundary>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <App />)
+
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
+    succeed = true
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('data1: data1'))
+    await waitFor(() => rendered.getByText('data2: data2'))
+
+    consoleMock.mockRestore()
+  })
+
   it('should keep previous data if amount of queries is the same', async () => {
     const key1 = queryKey()
     const key2 = queryKey()

src/react/useQueries.ts

@@ -3,13 +3,15 @@ import React from 'react'
 import { notifyManager } from '../core/notifyManager'
 import { QueriesObserver } from '../core/queriesObserver'
 import { useQueryClient } from './QueryClientProvider'
+import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
 import { UseQueryOptions, UseQueryResult } from './types'
 
 export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
   const mountedRef = React.useRef(false)
   const [, forceUpdate] = React.useState(0)
 
   const queryClient = useQueryClient()
+  const errorResetBoundary = useQueryErrorResetBoundary()
 
   const defaultedQueries = queries.map(options => {
     const defaultedOptions = queryClient.defaultQueryObserverOptions(options)
@@ -20,18 +22,30 @@ export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
     return defaultedOptions
   })
 
-  const [observer] = React.useState(
-    () => new QueriesObserver(queryClient, defaultedQueries)
+  const observerRef = React.useRef(
+    new QueriesObserver(queryClient, defaultedQueries)
   )
 
-  const result = observer.getOptimisticResult(defaultedQueries)
+  const result = observerRef.current.getOptimisticResult(defaultedQueries)
+
+  React.useEffect(() => {
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    observerRef.current.setQueries(defaultedQueries, { listeners: false })
+  }, [defaultedQueries])
+
+  const someSuspense = defaultedQueries.some(q => q.suspense)
+  const someUseErrorBoundary = defaultedQueries.some(q => q.useErrorBoundary)
+  const firstResultWithError = result.find(r => r.error)
+  const someError = firstResultWithError?.error
+  const someIsLoading = result.some(r => r.isLoading)
 
   React.useEffect(() => {
     mountedRef.current = true
 
-    const unsubscribe = observer.subscribe(
+    const unsubscribe = observerRef.current.subscribe(
       notifyManager.batchCalls(() => {
-        if (mountedRef.current) {
+        if (mountedRef.current && someIsLoading) {
           forceUpdate(x => x + 1)
         }
       })
@@ -41,13 +55,29 @@ export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
       mountedRef.current = false
       unsubscribe()
     }
-  }, [observer])
+  }, [someIsLoading])
 
-  React.useEffect(() => {
-    // Do not notify on updates because of changes in the options because
-    // these changes should already be reflected in the optimistic result.
-    observer.setQueries(defaultedQueries, { listeners: false })
-  }, [defaultedQueries, observer])
+  const handleReset = React.useCallback(() => {
+    errorResetBoundary.clearReset()
+    const unsubscribe = observerRef.current.subscribe()
+    throw observerRef.current
+      .refetch({ filter: x => x.getCurrentResult().isLoading })
+      .finally(unsubscribe)
+  }, [errorResetBoundary])
+
+  // Handle suspense and error boundaries
+  if (someSuspense || someUseErrorBoundary) {
+    if (someError) {
+      if (errorResetBoundary.isReset()) {
+        handleReset()
+      }
+      throw someError
+    }
+
+    if (someSuspense && someIsLoading) {
+      handleReset()
+    }
+  }
 
   return result
 }