Misc changes to error handling and useMergedInfiniteQueries (#757)

UseMergedInfiniteQueries: Return a merged error object
utils/request: Add Zod validation errors to RequestError
Misc: Add a refetch function to refetch queries which errored out
Misc: fix docstrings in useMergedInfiniteQueries and mergeSortedArrays

src/hooks/use-merged-infinite-queries/__tests__/use-merged-infinite-queries.test.ts

@@ -3,6 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { renderHook, waitFor } from '@/test-utils/rtl';
 
 import useMergedInfiniteQueries from '../use-merged-infinite-queries';
+import { UseMergedInfiniteQueriesError } from '../use-merged-infinite-queries-error';
 import { type SingleInfiniteQueryOptions } from '../use-merged-infinite-queries.types';
 
 type MockAPIResponse = {
@@ -105,6 +106,7 @@ describe(useMergedInfiniteQueries.name, () => {
       const [mergedResult] = result.current;
       expect(mergedResult.data).toStrictEqual([0, 2, 4, 6, 8]);
       expect(mergedResult.status).toStrictEqual('error');
+      expect(mergedResult.error).toBeInstanceOf(UseMergedInfiniteQueriesError);
     });
   });
 

src/hooks/use-merged-infinite-queries/use-merged-infinite-queries-error.ts

@@ -0,0 +1,8 @@
+export class UseMergedInfiniteQueriesError extends Error {
+  errors: Array<Error>;
+  constructor(message: string, errors: Array<Error>, options?: ErrorOptions) {
+    super(message, options);
+    this.errors = errors;
+    this.name = 'UseMergedInfiniteQueriesError';
+  }
+}

src/hooks/use-merged-infinite-queries/use-merged-infinite-queries.ts

@@ -1,11 +1,12 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 
 import { InfiniteQueryObserver, useQueryClient } from '@tanstack/react-query';
 
 import mergeSortedArrays from '@/utils/merge-sorted-arrays';
 
 import getMergedFetchNextPage from './helpers/get-merged-fetch-next-page';
 import getMergedQueryStatus from './helpers/get-merged-query-status';
+import { UseMergedInfiniteQueriesError } from './use-merged-infinite-queries-error';
 import {
   type SingleInfiniteQueryResult,
   type MergedQueriesResults,
@@ -26,8 +27,8 @@ import {
  * @param flattenResult - A function that takes the expected query result and flattens it into an array of items
  * @param compare - A comparison function used to sort and merge results.
  * The function should accept two arguments and return:
- *   - A number > 0 if the first argument has a higher priority.
- *   - A number <= 0 if the second argument has a higher or equal priority.
+ *   - A number > 0 if the second argument comes first.
+ *   - A number <= 0 if the first argument comes first.
  *   - **Note:** The comparison logic must match the sorting logic used in the queries to maintain consistency.
  *
  * @returns A tuple [mergedQueryResults, queryResults]:
@@ -85,6 +86,14 @@ export default function useMergedInfiniteQueries<TData, TResponse, TPageParam>({
     });
   }, [flattenedDataArrays, count, compare]);
 
+  const refetchQueriesWithError = useCallback(() => {
+    queryResults.forEach((res) => {
+      if (res.isError) {
+        res.refetch();
+      }
+    });
+  }, [queryResults]);
+
   const mergedQueryResults = {
     data: sortedArray,
     status: getMergedQueryStatus(queryResults),
@@ -99,6 +108,18 @@ export default function useMergedInfiniteQueries<TData, TResponse, TPageParam>({
       pageSize,
       setCount,
     }),
+    error: queryResults.some((qr) => qr.isError)
+      ? new UseMergedInfiniteQueriesError(
+          'One or more infinite queries failed',
+          queryResults.reduce((errors: Array<Error>, qr) => {
+            if (qr.isError) {
+              errors.push(qr.error);
+            }
+            return errors;
+          }, [])
+        )
+      : null,
+    refetch: refetchQueriesWithError,
     // ...add other properties if needed
   };
   return [mergedQueryResults, queryResults];

src/hooks/use-merged-infinite-queries/use-merged-infinite-queries.types.ts

@@ -5,6 +5,8 @@ import {
   type useInfiniteQuery,
 } from '@tanstack/react-query';
 
+import { type UseMergedInfiniteQueriesError } from './use-merged-infinite-queries-error';
+
 export type MergedQueryStatus = 'idle' | 'loading' | 'success' | 'error';
 
 export type MergedQueriesResults<TData> = {
@@ -15,6 +17,8 @@ export type MergedQueriesResults<TData> = {
   isFetchingNextPage: boolean;
   hasNextPage: boolean;
   fetchNextPage: () => void;
+  error: UseMergedInfiniteQueriesError | null;
+  refetch: () => void;
 };
 
 export type SingleInfiniteQueryOptions<TResponse, TPageParam> =

src/utils/request/request-error.ts

@@ -1,8 +1,19 @@
+import { type ZodIssue } from 'zod';
+
 export class RequestError extends Error {
   status: number;
-  constructor(message: string, status: number, options?: ErrorOptions) {
+  validationErrors: Array<ZodIssue> | undefined;
+  constructor(
+    message: string,
+    status: number,
+    validationErrors?: Array<ZodIssue>,
+    options?: ErrorOptions
+  ) {
     super(message, options);
     this.status = status;
+    if (validationErrors?.length) {
+      this.validationErrors = validationErrors;
+    }
     this.name = 'RequestError';
   }
 }

src/utils/request/request.ts

@@ -14,9 +14,14 @@ export default function request(
     async (res) => {
       if (!res.ok) {
         const error = await res.json();
-        throw new RequestError(error.message, res.status, {
-          cause: error.cause,
-        });
+        throw new RequestError(
+          error.message,
+          res.status,
+          error.validationErrors,
+          {
+            cause: error.cause,
+          }
+        );
       }
       return res;
     }