@pixotope/query 0.6.0 → 0.7.0

package/src/useMutation.ts

@@ -1,30 +1,42 @@
 import { useCallback, useRef, useState } from "react";
 
-export type MutationFunction<TData = unknown, TParams = unknown> = (
-  params: TParams,
-  overrideTargetMachine?: string
-) => Promise<TData>;
+export type MutationFunction<
+  TData = unknown,
+  TParams = unknown,
+  TMetadata = unknown,
+> = (params: TParams, meta?: TMetadata) => Promise<TData>;
 
 export interface MutationOptions<
   TData = unknown,
   TError = unknown,
   TParams = void,
+  TMetadata = unknown,
 > {
-  mutationFn: MutationFunction<TData, TParams>;
+  mutationFn: MutationFunction<TData, TParams, TMetadata>;
   params?: TParams;
-  onSuccess?: (data: TData, variables: TParams) => Promise<unknown> | unknown;
+  onSuccess?: (
+    data: TData,
+    variables: TParams,
+    meta?: TMetadata
+  ) => Promise<unknown> | unknown;
   onError?: (
     error: TMutationError<TError>,
-    variables: TParams
+    variables: TParams,
+    meta?: TMetadata
   ) => Promise<unknown> | unknown;
   onSettled?: (
     data: TData | undefined,
     error: TMutationError<TError> | null,
-    variables: TParams
+    variables: TParams,
+    meta?: TMetadata
   ) => Promise<unknown> | unknown;
   compareOrThrow?: (result: TData | TError) => boolean;
   timeout?: number;
-  prepareParams?: (variables: TParams, defaults?: TParams) => TParams;
+  prepareParams?: (
+    variables: TParams,
+    defaults?: TParams,
+    meta?: TMetadata
+  ) => TParams;
 }
 
 type TMutationError<TError> = TError | Error | null;
@@ -33,13 +45,19 @@ export interface MutateOptions<
   TData = unknown,
   TError = unknown,
   TParams = void,
+  TMetadata = unknown,
 > {
-  onSuccess?: (data: TData, variables: TParams) => void;
-  onError?: (error: TMutationError<TError>, variables: TParams) => void;
+  onSuccess?: (data: TData, variables: TParams, meta?: TMetadata) => void;
+  onError?: (
+    error: TMutationError<TError>,
+    variables: TParams,
+    meta?: TMetadata
+  ) => void;
   onSettled?: (
     data: TData | undefined,
     error: TMutationError<TError> | null,
-    variables: TParams
+    variables: TParams,
+    meta?: TMetadata
   ) => void;
 }
 
@@ -61,58 +79,13 @@ export class ComparisonFailError<TPayload = unknown> extends Error {
   }
 }
 
-/**
- * `useMutation` is a hook that allows you to perform a mutation/push updates to the services while
- * providing extensive API to tap into the status and results of the mutation.
- * @param mutationFn The mutation function to be called when the `mutate` function is called.
- * `useMutation` does not care about what the function does, all it needs it a function that returns
- * a promise.
- * @param options Options to configure the mutation.
- * @returns An object with the following properties:
- * - `mutateAsync`: A function that takes in the variables and returns a promise that resolves to the
- * result of the mutation. This function can be awaited to get the result of the mutation. Callbacks can
- * be passed to this function to be called when the mutation is successful or when it fails. It's good idea
- * to wrap this function in a try/catch block.
- * - `mutate`: A function that takes in the variables and returns nothing. This function does not
- * return a promise. Callbacks can be passed to this function to be called when the mutation is
- * successful or when it fails.
- * - `status`: The status of the mutation. Can be one of `idle`, `loading`, `success` or `error`.
- * - `result`: The result of the mutation. This is undefined until the mutation is successful.
- * - `reset`: A function that resets the mutation to the initial state.
- * - `error`: The error object if the mutation has failed.
- * @example
- * ```typescript
- * const mutationRes = useMutation({
- *    mutationFn: (variables) => {
- *      return ZMQHelper.callSomethingAsync(variables)
- *    },
- *    onSuccess: (data) => {
- *      // do something with the result
- *    },
- *    onError: (error) => {
- *      // do something with the error
- *    },
- *    onSettled: (data, error) => {
- *      // do something when the mutation is done
- *   }});
- *
- * // call the mutation
- * const res = await mutationRes.mutateAsync({ foo: "bar" });
- * // OR
- * mutationRes.mutate({ foo: "bar" }, {
- *  onSuccess: (data) => {
- *    // do something with the result
- *    // for example show a toast message
- *    // stop local loading state
- * });
- * ```
- */
 export const useMutation = <
   TData = unknown,
   TError = TMutationError<unknown>,
   TParams = void,
+  TMetadata = unknown,
 >(
-  options: MutationOptions<TData, TError, TParams>
+  options: MutationOptions<TData, TError, TParams, TMetadata>
 ) => {
   const {
     mutationFn,
@@ -142,79 +115,77 @@ export const useMutation = <
   const internalCallbackRef = useRef(internalCallbackRefistry);
   internalCallbackRef.current = internalCallbackRefistry;
 
-  const mutateAsync = useCallback(
-    async (params: TParams, overrideTargetMachine?: string) => {
-      setStatus("loading");
-      setError(null);
-
-      try {
-        const promises: RacePromises<TData>[] = [
-          mutationFnRef.current(
-            internalCallbackRef.current.prepareParams
-              ? internalCallbackRef.current.prepareParams(
-                  params,
-                  internalOptionsRef.current.params
+  const mutateAsync = useCallback(async (params: TParams, meta?: TMetadata) => {
+    setStatus("loading");
+    setError(null);
+
+    try {
+      const promises: RacePromises<TData>[] = [
+        mutationFnRef.current(
+          internalCallbackRef.current.prepareParams
+            ? internalCallbackRef.current.prepareParams(
+                params,
+                internalOptionsRef.current.params,
+                meta
+              )
+            : params,
+          meta
+        ),
+        ...(internalOptionsRef.current.timeout
+          ? [
+              new Promise<RaceErrorReason>((resolve) =>
+                setTimeout(
+                  () => resolve("timeout"),
+                  internalOptionsRef.current.timeout
                 )
-              : params,
-            overrideTargetMachine
-          ),
-          ...(internalOptionsRef.current.timeout
-            ? [
-                new Promise<RaceErrorReason>((resolve) =>
-                  setTimeout(
-                    () => resolve("timeout"),
-                    internalOptionsRef.current.timeout
-                  )
-                ),
-              ]
-            : []),
-        ];
-
-        const res = await Promise.race(promises);
-
-        if (res === "timeout") {
-          throw new Error("timeout");
-        }
+              ),
+            ]
+          : []),
+      ];
 
-        if (internalCallbackRef.current.compareOrThrow?.(res)) {
-          throw new ComparisonFailError(JSON.stringify(res), res);
-        }
+      const res = await Promise.race(promises);
 
-        setResult(res);
-        setStatus("success");
+      if (res === "timeout") {
+        throw new Error("timeout");
+      }
 
-        internalCallbackRef.current.onSuccess?.(res, params);
-        internalCallbackRef.current.onSettled?.(res, null, params);
+      if (internalCallbackRef.current.compareOrThrow?.(res)) {
+        throw new ComparisonFailError(JSON.stringify(res), res);
+      }
 
-        return res;
-      } catch (error: any) {
-        setError(error);
-        setStatus("error");
+      setResult(res);
+      setStatus("success");
 
-        internalCallbackRef.current.onError?.(error, params);
-        internalCallbackRef.current.onSettled?.(undefined, error, params);
+      internalCallbackRef.current.onSuccess?.(res, params, meta);
+      internalCallbackRef.current.onSettled?.(res, null, params, meta);
 
-        throw error;
-      }
-    },
-    []
-  );
+      return res;
+    } catch (error: any) {
+      setError(error);
+      setStatus("error");
+
+      internalCallbackRef.current.onError?.(error, params, meta);
+      internalCallbackRef.current.onSettled?.(undefined, error, params, meta);
+
+      throw error;
+    }
+  }, []);
 
   const mutate = useCallback(
     (
       variables: TParams,
-      options?: MutateOptions<TData, TError, TParams> & {
-        overrideTargetMachine?: string;
+      options?: MutateOptions<TData, TError, TParams, TMetadata> & {
+        meta?: TMetadata;
       }
     ) => {
-      mutateAsync(variables, options?.overrideTargetMachine).then(
+      mutateAsync(variables, options?.meta).then(
         (data) => {
-          options?.onSuccess?.(data, variables);
-          options?.onSettled?.(data, null, variables);
+          options?.onSuccess?.(data, variables, options?.meta);
+          options?.onSettled?.(data, null, variables, options?.meta);
         },
         (error) => {
-          options?.onError?.(error, variables);
-          options?.onSettled?.(undefined, error, variables);
+          options?.onError?.(error, variables, options?.meta);
+          options?.onSettled?.(undefined, error, variables, options?.meta);
         }
       );
     },

package/src/useQuery.test.ts

@@ -1,210 +1,162 @@
 import { fireEvent } from "@testing-library/dom";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { vi, describe, beforeEach, it, expect, test } from "vitest";
+import { vi, describe, it, expect, test } from "vitest";
 
 import { useQuery } from "./useQuery";
-import { MockUseQueryUtils } from "./mock/useQuery";
 const mockQueryKey = ["dummyQK"];
 
-function until(condition: boolean) {
-  return new Promise((resolve, reject) => {
-    if (condition) {
-      resolve(null);
-    } else {
-      reject();
-    }
-  });
-}
-
 describe("useQuery", () => {
-  let defaultQueryMock: MockUseQueryUtils;
-
-  beforeEach(() => {
-    defaultQueryMock = new MockUseQueryUtils({});
-  });
-
-  it("should call queryFn by on mount by default", () => {
-    const mockFunction = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    renderHook(() =>
-      useQuery({
-        queryFn: mockFunction,
-        key: mockQueryKey,
-      })
+  it("should call queryFn by on mount by default", async () => {
+    const mockFunction = vi.fn();
+    await act(() =>
+      renderHook(() =>
+        useQuery({
+          queryFn: mockFunction,
+          key: mockQueryKey,
+        })
+      )
     );
-
     expect(mockFunction).toBeCalledTimes(1);
   });
-  it("should be in loading state on mount", () => {
+  it("should be in loading state on mount", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn(),
         key: mockQueryKey,
       })
     );
 
-    expect(result.current.status).toBe("loading");
+    await waitFor(() => expect(result.current.status).toBe("loading"));
   });
   it("should be in success state after queryFn resolves", async () => {
+    const mockFunction = vi.fn();
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
       })
     );
     act(() => {
-      defaultQueryMock.resolve();
-    });
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
+      mockFunction.mockResolvedValue("test");
     });
+    await waitFor(() => expect(result.current.status).toBe("success"));
   });
   it("should be in error state after queryFn rejects", async () => {
+    const mockFunction = vi.fn().mockRejectedValue("test");
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
       })
     );
-    act(() => defaultQueryMock.reject());
-    await waitFor(() => until(result.current.status === "error"), {
-      timeout: 1000,
-    });
-    expect(result.current.status).toBe("error");
+    await waitFor(() => expect(result.current.status).toBe("error"));
   });
   it("should be in timeout state after queryFn rejects with timeout", async () => {
+    const mockFunction = vi.fn(
+      () => new Promise((_, reject) => setTimeout(() => reject("test"), 10))
+    );
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
         timeout: 0.01,
       })
     );
-    await waitFor(() => until(result.current.status === "error"), {
-      timeout: 1000,
-    });
-    expect(result.current.status === "error");
+    await waitFor(() => expect(result.current.status).toBe("error"));
   });
   it("should be in success state after queryFn resolves with initialData", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test-test-2"),
         key: mockQueryKey,
         initialData: "test-test",
       })
     );
-    defaultQueryMock.resolve();
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    await waitFor(() => expect(result.current.status).toBe("success"));
   });
   it("should be in idle state if enabled is false", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn(),
         key: mockQueryKey,
         enabled: false,
       })
     );
-    expect(result.current.status).toBe("idle");
+    await waitFor(() => expect(result.current.status).toBe("idle"));
   });
   test("refetch should trigger query function", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    const { result } = await act(() =>
-      renderHook(() =>
-        useQuery({
-          queryFn: resolver,
-          key: mockQueryKey,
-        })
-      )
+    const resolver = vi.fn().mockResolvedValue("test");
+    const { result } = renderHook(() =>
+      useQuery({
+        queryFn: resolver,
+        key: mockQueryKey,
+      })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-    await act(() => result.current.refetch());
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await act(() => result.current.refetch({}));
     expect(resolver).toBeCalledTimes(2);
   });
-  test("select should return selected right data", async () => {
-    const queryMock = new MockUseQueryUtils({
-      foo: "bar",
-      baz: "qux",
-    });
+  test("select should return correctly selected data", async () => {
+    const resolver = vi.fn().mockResolvedValue({ foo: "bar" });
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => queryMock.getMockedQueryFn(),
+        queryFn: resolver,
         key: mockQueryKey,
-        select: (data) => data?.foo,
+        select: (data: any) => data?.foo,
       })
     );
-    expect(result.current.data).toBeUndefined();
-    queryMock.resolve();
-    await waitFor(() => until(result.current.data !== undefined), {
-      timeout: 1000,
-    });
-    expect(result.current.data).toBe("bar");
+    await waitFor(() => expect(result.current.data).toBe("bar"));
   });
   test("onSuccess should be called after queryFn resolves", async () => {
     const onSuccess = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test"),
         key: mockQueryKey,
         onSuccess,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSuccess).toBeCalledTimes(1);
+    await waitFor(() => expect(onSuccess).toBeCalledTimes(1));
+    expect(onSuccess).toBeCalledWith("test");
   });
   test("onError should be called after queryFn rejects", async () => {
     const onError = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockRejectedValue("test"),
         key: mockQueryKey,
         onError,
       })
     );
-    await act(() => defaultQueryMock.reject());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onError).toBeCalledTimes(1);
+    await waitFor(() => expect(onError).toBeCalledTimes(1));
+    expect(onError).toBeCalledWith("test");
   });
   test("onSettled should be called after queryFn resolves", async () => {
     const onSettled = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test"),
         key: mockQueryKey,
         onSettled,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSettled).toBeCalledTimes(1);
+    await waitFor(() => expect(onSettled).toBeCalledTimes(1));
+    expect(onSettled).toBeCalledWith("test", undefined);
   });
   test("onSettled should be called after queryFn rejects", async () => {
     const onSettled = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockRejectedValue("test"),
         key: mockQueryKey,
         onSettled,
       })
     );
-    await act(() => defaultQueryMock.reject());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSettled).toBeCalledTimes(1);
+    await waitFor(() => expect(onSettled).toBeCalledTimes(1));
+    expect(onSettled).toBeCalledWith(undefined, "test");
   });
   test("refetch is triggered on window focus", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = await act(() =>
       renderHook(() =>
         useQuery({
@@ -214,15 +166,12 @@ describe("useQuery", () => {
         })
       )
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    await waitFor(() => expect(result.current.status).toBe("success"));
     await act(() => fireEvent(window, new FocusEvent("focus")));
     expect(resolver).toBeCalledTimes(2);
   });
   test("refetch interval should work", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = renderHook(() =>
       useQuery({
         queryFn: resolver,
@@ -230,38 +179,31 @@ describe("useQuery", () => {
         key: mockQueryKey,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-    waitFor(() => until(resolver.call.length > 1), { timeout: 1000 });
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await waitFor(() => expect(resolver.mock.calls.length).toBeGreaterThan(1));
   });
   test("refetch should automatically trigger if queryKey is changed", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    const { result, rerender } = await act(() =>
-      renderHook(
-        (props) =>
-          useQuery({
-            queryFn: resolver,
-            key: props.key,
-          }),
-        {
-          initialProps: {
-            key: ["dummyQK1"],
-          },
-        }
-      )
-    );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    const resolver = vi.fn().mockResolvedValue("test");
+    const { result, rerender } = renderHook(
+      (props) =>
+        useQuery({
+          queryFn: resolver,
+          key: props.key,
+        }),
+      {
+        initialProps: {
+          key: ["dummyQK1"],
+        },
+      }
+    );
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await waitFor(() => expect(resolver).toBeCalledTimes(1));
     rerender({ key: ["dummyQK2"] });
     rerender({ key: ["dummyQK3"] });
-    expect(resolver).toBeCalledTimes(3);
+    await waitFor(() => expect(resolver).toBeCalledTimes(3));
   });
   test("stateless mode", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = renderHook(() =>
       useQuery({
         queryFn: resolver,
@@ -269,11 +211,7 @@ describe("useQuery", () => {
         stateless: true,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-
+    await waitFor(() => expect(result.current.status).toBe("success"));
     // Here ts should kick in and complain about but for testing purposes, all good
     // @ts-ignore
     expect(result.current.data).toBeUndefined();

package/src/useQuery.ts

@@ -259,14 +259,11 @@ export const useQuery = <
 
     // If the query should be refetched on an interval, add an interval
     if (refetchInterval > 0) {
-      const interval = setInterval(
-        () => {
-          if (shouldRefetch()) {
-            refetch();
-          }
-        },
-        Math.max(refetchInterval, 1000)
-      );
+      const interval = setInterval(() => {
+        if (shouldRefetch()) {
+          refetch();
+        }
+      }, refetchInterval);
 
       cleanups.push(() => {
         clearInterval(interval);