@outseta/react 0.3.7 → 0.4.1

package/src/generated/public/public.ts

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import {
   useMutation
-} from '@tanstack/react-query';
+} from '../../query';
 import type {
   MutationFunction,
   UseMutationOptions,
   UseMutationResult
-} from '@tanstack/react-query';
+} from '../../query';
 
 import type {
   AuthGetTokenParams,

package/src/generated/support/support.ts

@@ -2,7 +2,7 @@
 import {
   useMutation,
   useQuery
-} from '@tanstack/react-query';
+} from '../../query';
 import type {
   MutationFunction,
   QueryFunction,
@@ -11,7 +11,7 @@ import type {
   UseMutationResult,
   UseQueryOptions,
   UseQueryResult
-} from '@tanstack/react-query';
+} from '../../query';
 
 import type {
   Article,

package/src/index.ts

@@ -4,7 +4,7 @@ export type { OutsetaCredentials } from "@outseta/api-client";
 // Outseta embed components and hooks
 export * from "./components/index.js";
 
-// Generated React Query hooks and schema types
+// Generated React hooks and schema types
 export * from "./generated/activity/activity.js";
 export * from "./generated/billing/billing.js";
 export * from "./generated/crm/crm.js";

package/src/mutator.ts

@@ -9,11 +9,11 @@ type RequestConfig<T = unknown> = {
 };
 
 /**
- * Orval react-query mutator.
+ * Orval mutator for the generated React hooks.
  *
  * First arg is a request config object `{ url, method, params, signal }`.
- * Second arg is a client from `createClient()` (provided via the React
- * context/provider).
+ * Second arg is a client from `createClient()` (passed through each hook's
+ * `request` option).
  */
 export const customFetch = async <T>(
   config: RequestConfig,

package/src/query.test.ts

@@ -0,0 +1,276 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { customFetch } from "./mutator.js";
+import { useMutation, useQuery } from "./query.js";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("useQuery", () => {
+  it("fetches on mount and exposes the resolved data", async () => {
+    const queryFn = vi.fn().mockResolvedValue("hello");
+
+    const { result } = renderHook(() =>
+      useQuery({ queryKey: ["greeting"], queryFn }),
+    );
+
+    // Pending + fetching on the first commit.
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.data).toBeUndefined();
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toBe("hello");
+    expect(result.current.error).toBeNull();
+    expect(result.current.isFetching).toBe(false);
+    expect(queryFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes an AbortSignal and the queryKey to the query function", async () => {
+    const queryFn = vi.fn().mockResolvedValue(42);
+
+    renderHook(() => useQuery({ queryKey: ["items", { page: 2 }], queryFn }));
+
+    await waitFor(() => expect(queryFn).toHaveBeenCalled());
+
+    const context = queryFn.mock.calls[0][0];
+    expect(context.signal).toBeInstanceOf(AbortSignal);
+    expect(context.queryKey).toEqual(["items", { page: 2 }]);
+  });
+
+  it("captures a rejection as an error state", async () => {
+    const error = new Error("boom");
+    const queryFn = vi.fn().mockRejectedValue(error);
+
+    const { result } = renderHook(() =>
+      useQuery({ queryKey: ["fails"], queryFn }),
+    );
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toBe(error);
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.isSuccess).toBe(false);
+  });
+
+  it("does not fetch while disabled", () => {
+    const queryFn = vi.fn();
+
+    const { result } = renderHook(() =>
+      useQuery({ queryKey: ["off"], queryFn, enabled: false }),
+    );
+
+    expect(queryFn).not.toHaveBeenCalled();
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isPending).toBe(true);
+  });
+
+  it("re-runs the query via refetch", async () => {
+    const queryFn = vi
+      .fn()
+      .mockResolvedValueOnce("first")
+      .mockResolvedValueOnce("second");
+
+    const { result } = renderHook(() =>
+      useQuery({ queryKey: ["refetch"], queryFn }),
+    );
+
+    await waitFor(() => expect(result.current.data).toBe("first"));
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(result.current.data).toBe("second");
+    expect(queryFn).toHaveBeenCalledTimes(2);
+  });
+
+  it("refetches when the query key changes", async () => {
+    const queryFn = vi.fn(
+      (context: { queryKey: ReadonlyArray<unknown> }) =>
+        Promise.resolve(context.queryKey[1]),
+    );
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: number }) => useQuery({ queryKey: ["item", id], queryFn }),
+      { initialProps: { id: 1 } },
+    );
+
+    await waitFor(() => expect(result.current.data).toBe(1));
+
+    rerender({ id: 2 });
+
+    await waitFor(() => expect(result.current.data).toBe(2));
+    expect(queryFn).toHaveBeenCalledTimes(2);
+  });
+
+  it("applies the select transform", async () => {
+    const queryFn = vi.fn().mockResolvedValue({ items: [1, 2, 3] });
+
+    const { result } = renderHook(() =>
+      useQuery({
+        queryKey: ["select"],
+        queryFn,
+        select: (data: { items: number[] }) => data.items.length,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.data).toBe(3));
+  });
+
+  it("seeds state from initialData without an immediate fetch flag", async () => {
+    const queryFn = vi.fn().mockResolvedValue("fresh");
+
+    const { result } = renderHook(() =>
+      useQuery({ queryKey: ["seed"], queryFn, initialData: "seeded" }),
+    );
+
+    expect(result.current.isSuccess).toBe(true);
+    expect(result.current.data).toBe("seeded");
+
+    // It still revalidates on mount.
+    await waitFor(() => expect(result.current.data).toBe("fresh"));
+  });
+});
+
+describe("useMutation", () => {
+  it("runs the mutation and surfaces the result", async () => {
+    const mutationFn = vi.fn().mockResolvedValue({ id: 1 });
+    const onSuccess = vi.fn();
+    const onSettled = vi.fn();
+
+    const { result } = renderHook(() =>
+      useMutation({ mutationFn, onSuccess, onSettled }),
+    );
+
+    expect(result.current.isIdle).toBe(true);
+
+    act(() => {
+      result.current.mutate({ name: "acme" });
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toEqual({ id: 1 });
+    expect(result.current.variables).toEqual({ name: "acme" });
+    expect(mutationFn).toHaveBeenCalledWith({ name: "acme" });
+    expect(onSuccess).toHaveBeenCalledWith({ id: 1 }, { name: "acme" }, undefined);
+    expect(onSettled).toHaveBeenCalledWith(
+      { id: 1 },
+      null,
+      { name: "acme" },
+      undefined,
+    );
+  });
+
+  it("invokes per-call callbacks in addition to hook-level ones", async () => {
+    const mutationFn = vi.fn().mockResolvedValue("ok");
+    const hookOnSuccess = vi.fn();
+    const callOnSuccess = vi.fn();
+
+    const { result } = renderHook(() =>
+      useMutation({ mutationFn, onSuccess: hookOnSuccess }),
+    );
+
+    await act(async () => {
+      await result.current.mutateAsync("payload", { onSuccess: callOnSuccess });
+    });
+
+    expect(hookOnSuccess).toHaveBeenCalledOnce();
+    expect(callOnSuccess).toHaveBeenCalledOnce();
+  });
+
+  it("captures errors and rejects mutateAsync, but not mutate", async () => {
+    const error = new Error("nope");
+    const mutationFn = vi.fn().mockRejectedValue(error);
+    const onError = vi.fn();
+
+    const { result } = renderHook(() => useMutation({ mutationFn, onError }));
+
+    await act(async () => {
+      await expect(result.current.mutateAsync("x")).rejects.toThrow("nope");
+    });
+
+    expect(result.current.isError).toBe(true);
+    expect(result.current.error).toBe(error);
+    expect(onError).toHaveBeenCalledWith(error, "x", undefined);
+
+    // `mutate` is fire-and-forget: it must not throw an unhandled rejection.
+    await act(async () => {
+      result.current.mutate("y");
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(result.current.error).toBe(error));
+  });
+
+  it("resets back to the idle state", async () => {
+    const mutationFn = vi.fn().mockResolvedValue("done");
+
+    const { result } = renderHook(() => useMutation({ mutationFn }));
+
+    await act(async () => {
+      await result.current.mutateAsync("v");
+    });
+    expect(result.current.isSuccess).toBe(true);
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.isIdle).toBe(true);
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.error).toBeNull();
+  });
+});
+
+describe("integration with the request mutator", () => {
+  it("drives a query through customFetch and a fake client", async () => {
+    const payload = [{ Uid: "deal-1" }];
+    const client = vi.fn(async () =>
+      new Response(JSON.stringify(payload), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      }),
+    );
+
+    const { result } = renderHook(() =>
+      useQuery({
+        queryKey: ["/api/v1/crm/deals"],
+        queryFn: ({ signal }) =>
+          customFetch(
+            { url: "/api/v1/crm/deals", method: "GET", signal },
+            client,
+          ),
+      }),
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toEqual(payload);
+    expect(client).toHaveBeenCalledOnce();
+    expect(client).toHaveBeenCalledWith(
+      "/api/v1/crm/deals",
+      expect.anything(),
+    );
+  });
+
+  it("turns a non-ok response into an error", async () => {
+    const client = vi.fn(async () => new Response("nope", { status: 500 }));
+
+    const { result } = renderHook(() =>
+      useQuery({
+        queryKey: ["/api/v1/crm/deals", "500"],
+        queryFn: ({ signal }) =>
+          customFetch(
+            { url: "/api/v1/crm/deals", method: "GET", signal },
+            client,
+          ),
+      }),
+    );
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error).toBeInstanceOf(Error);
+  });
+});

package/src/query.ts

@@ -0,0 +1,352 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Minimal vanilla-React implementation of the small slice of the TanStack
+ * Query v5 API surface that Orval's generated hooks depend on.
+ *
+ * This lets `@outseta/react` ship the generated `useX` hooks without a
+ * `@tanstack/react-query` dependency or a `QueryClientProvider`. It is a
+ * lightweight fetch-on-mount implementation: each hook instance owns its own
+ * request lifecycle. There is intentionally no cross-component caching,
+ * request deduplication, or background refetching — reach for TanStack Query
+ * (or another data layer) directly if you need those.
+ *
+ * `scripts/post-generate.mjs` rewrites the generated `@tanstack/react-query`
+ * imports to point at this module.
+ */
+
+export type QueryKey = ReadonlyArray<unknown>;
+
+export interface QueryFunctionContext<TQueryKey extends QueryKey = QueryKey> {
+  signal: AbortSignal;
+  queryKey: TQueryKey;
+}
+
+export type QueryFunction<
+  T = unknown,
+  TQueryKey extends QueryKey = QueryKey,
+> = (context: QueryFunctionContext<TQueryKey>) => T | Promise<T>;
+
+export type MutationFunction<TData = unknown, TVariables = unknown> = (
+  variables: TVariables,
+) => Promise<TData>;
+
+export type QueryStatus = "pending" | "error" | "success";
+export type MutationStatus = "idle" | "pending" | "error" | "success";
+
+export interface UseQueryOptions<
+  TQueryFnData = unknown,
+  // `TError` is unused here but kept so the generated call sites'
+  // `UseQueryOptions<TQueryFnData, TError, TData>` type arguments line up.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> {
+  queryKey?: TQueryKey;
+  queryFn?: QueryFunction<TQueryFnData, TQueryKey>;
+  /** Skip fetching while `false`. Defaults to `true`. */
+  enabled?: boolean;
+  /** Transform the raw response before it is returned as `data`. */
+  select?: (data: TQueryFnData) => TData;
+  initialData?: TData | (() => TData);
+}
+
+export interface UseQueryResult<TData = unknown, TError = unknown> {
+  data: TData | undefined;
+  error: TError | null;
+  status: QueryStatus;
+  isPending: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  isFetching: boolean;
+  refetch: () => Promise<void>;
+}
+
+export interface MutateOptions<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> {
+  onSuccess?: (
+    data: TData,
+    variables: TVariables,
+    context: TContext | undefined,
+  ) => unknown;
+  onError?: (
+    error: TError,
+    variables: TVariables,
+    context: TContext | undefined,
+  ) => unknown;
+  onSettled?: (
+    data: TData | undefined,
+    error: TError | null,
+    variables: TVariables,
+    context: TContext | undefined,
+  ) => unknown;
+}
+
+export interface UseMutationOptions<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> extends MutateOptions<TData, TError, TVariables, TContext> {
+  mutationFn?: MutationFunction<TData, TVariables>;
+  mutationKey?: unknown[];
+  onMutate?: (
+    variables: TVariables,
+  ) => Promise<TContext | undefined> | TContext | undefined;
+}
+
+export interface UseMutationResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> {
+  data: TData | undefined;
+  error: TError | null;
+  variables: TVariables | undefined;
+  status: MutationStatus;
+  isIdle: boolean;
+  isPending: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  mutate: (
+    variables: TVariables,
+    options?: MutateOptions<TData, TError, TVariables, TContext>,
+  ) => void;
+  mutateAsync: (
+    variables: TVariables,
+    options?: MutateOptions<TData, TError, TVariables, TContext>,
+  ) => Promise<TData>;
+  reset: () => void;
+}
+
+interface QueryState<TData, TError> {
+  status: QueryStatus;
+  data: TData | undefined;
+  error: TError | null;
+}
+
+/**
+ * Vanilla-React `useQuery`. Fetches on mount, re-fetches when the serialized
+ * `queryKey` changes, and exposes a `refetch()` for manual reloads.
+ */
+export function useQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UseQueryResult<TData, TError> {
+  const { queryKey, enabled = true } = options;
+  const keyHash = JSON.stringify(queryKey ?? []);
+
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  const abortRef = useRef<AbortController | null>(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const [state, setState] = useState<QueryState<TData, TError>>(() => {
+    const { initialData } = optionsRef.current;
+    const resolved =
+      typeof initialData === "function"
+        ? (initialData as () => TData)()
+        : initialData;
+    return resolved !== undefined
+      ? { status: "success", data: resolved, error: null }
+      : { status: "pending", data: undefined, error: null };
+  });
+  const [isFetching, setIsFetching] = useState(false);
+
+  const runQuery = useCallback(async (): Promise<void> => {
+    const { queryFn, queryKey: key, select } = optionsRef.current;
+    if (!queryFn) return;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setIsFetching(true);
+
+    try {
+      const raw = await queryFn({
+        signal: controller.signal,
+        queryKey: (key ?? []) as TQueryKey,
+      });
+      if (controller.signal.aborted || !mountedRef.current) return;
+      const data = select ? select(raw) : (raw as unknown as TData);
+      setState({ status: "success", data, error: null });
+    } catch (error) {
+      if (controller.signal.aborted || !mountedRef.current) return;
+      setState((prev) => ({
+        status: "error",
+        data: prev.data,
+        error: error as TError,
+      }));
+    } finally {
+      if (!controller.signal.aborted && mountedRef.current) {
+        setIsFetching(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+    void runQuery();
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, [enabled, keyHash, runQuery]);
+
+  const refetch = useCallback(async (): Promise<void> => {
+    await runQuery();
+  }, [runQuery]);
+
+  const status = state.status;
+  return {
+    data: state.data,
+    error: state.error,
+    status,
+    isPending: status === "pending",
+    isLoading: status === "pending" && isFetching,
+    isError: status === "error",
+    isSuccess: status === "success",
+    isFetching,
+    refetch,
+  };
+}
+
+interface MutationState<TData, TError, TVariables> {
+  status: MutationStatus;
+  data: TData | undefined;
+  error: TError | null;
+  variables: TVariables | undefined;
+}
+
+/**
+ * Vanilla-React `useMutation`. Returns `mutate`/`mutateAsync` plus the current
+ * status flags, and invokes the `onMutate`/`onSuccess`/`onError`/`onSettled`
+ * lifecycle callbacks (both hook-level and per-call).
+ */
+export function useMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const [state, setState] = useState<MutationState<TData, TError, TVariables>>({
+    status: "idle",
+    data: undefined,
+    error: null,
+    variables: undefined,
+  });
+
+  const mutateAsync = useCallback(
+    async (
+      variables: TVariables,
+      mutateOptions?: MutateOptions<TData, TError, TVariables, TContext>,
+    ): Promise<TData> => {
+      const opts = optionsRef.current;
+      const { mutationFn } = opts;
+      if (!mutationFn) {
+        throw new Error("@outseta/react: useMutation called without a mutationFn.");
+      }
+
+      if (mountedRef.current) {
+        setState({
+          status: "pending",
+          data: undefined,
+          error: null,
+          variables,
+        });
+      }
+
+      let context: TContext | undefined;
+      try {
+        context = await opts.onMutate?.(variables);
+        const data = await mutationFn(variables);
+        if (mountedRef.current) {
+          setState({ status: "success", data, error: null, variables });
+        }
+        await opts.onSuccess?.(data, variables, context);
+        await mutateOptions?.onSuccess?.(data, variables, context);
+        await opts.onSettled?.(data, null, variables, context);
+        await mutateOptions?.onSettled?.(data, null, variables, context);
+        return data;
+      } catch (error) {
+        const typedError = error as TError;
+        if (mountedRef.current) {
+          setState({
+            status: "error",
+            data: undefined,
+            error: typedError,
+            variables,
+          });
+        }
+        await opts.onError?.(typedError, variables, context);
+        await mutateOptions?.onError?.(typedError, variables, context);
+        await opts.onSettled?.(undefined, typedError, variables, context);
+        await mutateOptions?.onSettled?.(undefined, typedError, variables, context);
+        throw error;
+      }
+    },
+    [],
+  );
+
+  const mutate = useCallback(
+    (
+      variables: TVariables,
+      mutateOptions?: MutateOptions<TData, TError, TVariables, TContext>,
+    ): void => {
+      void mutateAsync(variables, mutateOptions).catch(() => {
+        // Errors are surfaced through the returned `error`/`status`; swallow
+        // the rejection so `mutate` stays fire-and-forget like TanStack Query.
+      });
+    },
+    [mutateAsync],
+  );
+
+  const reset = useCallback((): void => {
+    setState({ status: "idle", data: undefined, error: null, variables: undefined });
+  }, []);
+
+  const status = state.status;
+  return {
+    data: state.data,
+    error: state.error,
+    variables: state.variables,
+    status,
+    isIdle: status === "idle",
+    isPending: status === "pending",
+    isError: status === "error",
+    isSuccess: status === "success",
+    mutate,
+    mutateAsync,
+    reset,
+  };
+}