@pixotope/query 0.4.0 → 0.6.0

package/src/useMutation.ts

@@ -13,10 +13,13 @@ export interface MutationOptions<
   mutationFn: MutationFunction<TData, TParams>;
   params?: TParams;
   onSuccess?: (data: TData, variables: TParams) => Promise<unknown> | unknown;
-  onError?: (error: TError, variables: TParams) => Promise<unknown> | unknown;
+  onError?: (
+    error: TMutationError<TError>,
+    variables: TParams
+  ) => Promise<unknown> | unknown;
   onSettled?: (
     data: TData | undefined,
-    error: TError | null,
+    error: TMutationError<TError> | null,
     variables: TParams
   ) => Promise<unknown> | unknown;
   compareOrThrow?: (result: TData | TError) => boolean;
@@ -24,16 +27,18 @@ export interface MutationOptions<
   prepareParams?: (variables: TParams, defaults?: TParams) => TParams;
 }
 
+type TMutationError<TError> = TError | Error | null;
+
 export interface MutateOptions<
   TData = unknown,
   TError = unknown,
   TParams = void,
 > {
   onSuccess?: (data: TData, variables: TParams) => void;
-  onError?: (error: TError, variables: TParams) => void;
+  onError?: (error: TMutationError<TError>, variables: TParams) => void;
   onSettled?: (
     data: TData | undefined,
-    error: TError | null,
+    error: TMutationError<TError> | null,
     variables: TParams
   ) => void;
 }
@@ -102,7 +107,11 @@ export class ComparisonFailError<TPayload = unknown> extends Error {
  * });
  * ```
  */
-export const useMutation = <TData = unknown, TError = unknown, TParams = void>(
+export const useMutation = <
+  TData = unknown,
+  TError = TMutationError<unknown>,
+  TParams = void,
+>(
   options: MutationOptions<TData, TError, TParams>
 ) => {
   const {
@@ -116,7 +125,7 @@ export const useMutation = <TData = unknown, TError = unknown, TParams = void>(
     timeout,
   } = options;
   const [status, setStatus] = useState<MutationStatus>("idle");
-  const [error, setError] = useState<TError | null>(null);
+  const [error, setError] = useState<TMutationError<TError>>(null);
   const [result, setResult] = useState<TData | undefined>(undefined);
   const mutationFnRef = useRef(mutationFn);
   const internalOptionsRef = useRef({
@@ -182,13 +191,8 @@ export const useMutation = <TData = unknown, TError = unknown, TParams = void>(
         setError(error);
         setStatus("error");
 
-        if (internalCallbackRef.current.onError) {
-          internalCallbackRef.current.onError(error, params);
-        }
-
-        if (internalCallbackRef.current.onSettled) {
-          internalCallbackRef.current.onSettled(undefined, error, params);
-        }
+        internalCallbackRef.current.onError?.(error, params);
+        internalCallbackRef.current.onSettled?.(undefined, error, params);
 
         throw error;
       }
@@ -222,7 +226,11 @@ export const useMutation = <TData = unknown, TError = unknown, TParams = void>(
     status,
     result,
     mutate,
-    reset: () => setStatus("idle"),
+    reset: () => {
+      setStatus("idle");
+      setError(null);
+      setResult(undefined);
+    },
     error,
   };
 };

package/src/useQuery.test.ts

@@ -242,13 +242,12 @@ describe("useQuery", () => {
       renderHook(
         (props) =>
           useQuery({
-            queryFn: props.resolver,
+            queryFn: resolver,
             key: props.key,
           }),
         {
           initialProps: {
             key: ["dummyQK1"],
-            resolver,
           },
         }
       )
@@ -257,9 +256,9 @@ describe("useQuery", () => {
     await waitFor(() => until(result.current.status === "success"), {
       timeout: 1000,
     });
-    rerender({ key: ["dummyQK2"], resolver });
-    rerender({ key: ["dummyQK2"], resolver });
-    expect(resolver).toBeCalledTimes(2);
+    rerender({ key: ["dummyQK2"] });
+    rerender({ key: ["dummyQK3"] });
+    expect(resolver).toBeCalledTimes(3);
   });
   test("stateless mode", async () => {
     const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());

package/src/useQuery.ts

@@ -9,10 +9,10 @@ export interface QueryOptions<
 > {
   queryFn: (params: TParams | undefined | void) => Promise<TData>;
   onSuccess?: (data: TData) => Promise<void> | void;
-  onError?: (error: TError) => Promise<void> | void;
+  onError?: (error: TQueryError<TError>) => Promise<void> | void;
   onSettled?: (
     data: TData | undefined,
-    error: TError | undefined
+    error: TQueryError<TError> | undefined
   ) => Promise<void> | void;
   timeout?: number;
   enabled?: boolean;
@@ -32,6 +32,8 @@ type RacePromises<T> = Promise<T | RaceErrorReason>;
 type WithData<TData> = { data: TData | undefined };
 type TQueryKey = readonly any[];
 
+type TQueryError<TError> = TError | Error | null;
+
 export type UseQueryResult<
   TData = unknown,
   TError = unknown,
@@ -39,7 +41,7 @@ export type UseQueryResult<
   TSelectData = TData,
   Stateless extends true | undefined = undefined,
 > = {
-  error: TError | null;
+  error: TQueryError<TError>;
   status: QueryStatus;
   refetch: (params: TParams | void | undefined) => Promise<void>;
   reset: () => void;
@@ -51,11 +53,11 @@ function normalizeQueryKey(queryKey: TQueryKey): string {
 }
 
 type TInternalCallbackRef<TData, TError, TSelectData> = {
-  onError?: (error: TError) => Promise<void> | void;
+  onError?: (error: TQueryError<TError>) => Promise<void> | void;
   onSuccess?: (data: TData) => Promise<void> | void;
   onSettled?: (
     data: TData | undefined,
-    error: TError | undefined
+    error: TQueryError<TError> | undefined
   ) => Promise<void> | void;
   compareOrThrow?: (data: TData) => boolean;
   select?: (data: TData) => TSelectData;
@@ -70,9 +72,11 @@ type TInternalOptionsRef<TData> = {
   stateless?: boolean;
 };
 
+const getRandomUUID = () => Math.random().toString(36).substring(2, 15);
+
 export const useQuery = <
   TData = unknown,
-  TError = unknown,
+  TError = TQueryError<unknown>,
   TParams = void,
   TSelected = TData,
   Stateless extends true | undefined = undefined,
@@ -101,7 +105,6 @@ export const useQuery = <
     key: queryKeyPassed,
   } = options;
   const queryKey = normalizeQueryKey(queryKeyPassed ?? []);
-  const promiseResolutionInProgress = useRef(false);
   const lastFetchedAt = useRef<number | null>(null);
   const lastQueryKey = useRef<string | undefined>(undefined);
   const queryFnRef = useRef(queryFn);
@@ -132,11 +135,12 @@ export const useQuery = <
     stateless,
     timeout,
   };
+  const requestIdRef = useRef(getRandomUUID());
 
   const [status, setStatus] = useState<QueryStatus>(() => {
     return "idle";
   });
-  const [error, setError] = useState<TError | null>(null);
+  const [error, setError] = useState<TQueryError<TError>>(null);
   const [data, setData] = useState<TData | undefined>(() => {
     if (initialData !== undefined) {
       if (typeof initialData === "function") {
@@ -174,10 +178,9 @@ export const useQuery = <
 
   const refetch = useCallback(
     async (params: TParams | void | undefined = undefined) => {
-      if (
-        promiseResolutionInProgress.current ||
-        !internalOptionsRef.current.enabled
-      ) {
+      const requestId = getRandomUUID();
+      requestIdRef.current = requestId;
+      if (!internalOptionsRef.current.enabled) {
         return;
       }
 
@@ -199,9 +202,10 @@ export const useQuery = <
             : []),
         ];
 
-        promiseResolutionInProgress.current = true;
         const res = await Promise.race(promises);
-        promiseResolutionInProgress.current = false;
+        if (requestIdRef.current !== requestId) {
+          return;
+        }
 
         if (res === "timeout") {
           throw new Error("timeout");
@@ -213,7 +217,7 @@ export const useQuery = <
           internalCallbackRef.current.compareOrThrow &&
           internalCallbackRef.current.compareOrThrow(res) === true
         ) {
-          throw new Error("compareOrThrow");
+          throw new Error("failedComparison");
         }
 
         setStatus("success");
@@ -238,42 +242,23 @@ export const useQuery = <
   }, [refetch]);
 
   useEffect(() => {
-    if (enabled) {
-      refetch();
-    }
-  }, [enabled, refetch, queryKey]);
-
-  useEffect(() => {
-    if (lastQueryKey.current === undefined) {
-      lastQueryKey.current = queryKey;
-      refetch();
-      return;
-    }
-
-    if (queryKey !== lastQueryKey.current) {
-      lastQueryKey.current = queryKey;
-      refetch();
-    }
-  }, [queryKey, refetch, enabled]);
+    const cleanups: (() => void)[] = [];
 
-  useEffect(() => {
+    // If the query should be refetched on window focus, add a listener
     if (refetchOnWindowFocus) {
       const queryHandleFocus = () => {
-        if (shouldRefetch()) {
-          refetch();
-        }
+        refetch();
       };
 
       window.addEventListener("focus", queryHandleFocus);
 
-      return () => {
+      cleanups.push(() => {
         window.removeEventListener("focus", queryHandleFocus);
-      };
+      });
     }
-  }, [refetchOnWindowFocus, refetch, shouldRefetch]);
 
-  useEffect(() => {
-    if (refetchInterval !== 0) {
+    // If the query should be refetched on an interval, add an interval
+    if (refetchInterval > 0) {
       const interval = setInterval(
         () => {
           if (shouldRefetch()) {
@@ -283,11 +268,31 @@ export const useQuery = <
         Math.max(refetchInterval, 1000)
       );
 
-      return () => {
+      cleanups.push(() => {
         clearInterval(interval);
-      };
+      });
     }
-  }, [refetch, refetchInterval, shouldRefetch]);
+
+    // If the query key has changed, refetch
+    if (
+      lastQueryKey.current === undefined ||
+      queryKey !== lastQueryKey.current
+    ) {
+      lastQueryKey.current = queryKey;
+      refetch();
+    }
+
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [
+    queryKey,
+    enabled,
+    refetchOnWindowFocus,
+    refetchInterval,
+    shouldRefetch,
+    refetch,
+  ]);
 
   return {
     data: