Add debug values

Author: htunnicliff

src/__test__/infinite.test.ts

@@ -7,7 +7,7 @@ import type { paths } from "./fixtures/petstore.js";
 
 // Mock `useCallback` (return given function as-is)
 vi.mock("react");
-const { useCallback, useMemo } = vi.mocked(React);
+const { useCallback, useMemo, useDebugValue } = vi.mocked(React);
 useCallback.mockImplementation((fn) => fn);
 useMemo.mockImplementation((fn) => fn());
 
@@ -100,4 +100,16 @@ describe("createInfiniteHook", () => {
       undefined,
     );
   });
+
+  it("invokes debug value hook with path", () => {
+    useInfinite("/pet/findByStatus", () => null);
+
+    expect(useDebugValue).toHaveBeenLastCalledWith("/pet/findByStatus");
+
+    useInfinite("/pet/findByTags", () => ({
+      params: { query: { tags: ["tag1"] } },
+    }));
+
+    expect(useDebugValue).toHaveBeenLastCalledWith("/pet/findByTags");
+  });
 });

src/__test__/mutate.test.ts

@@ -9,7 +9,7 @@ import type { paths } from "./fixtures/petstore.js";
 
 // Mock `useCallback` (return given function as-is)
 vi.mock("react");
-const { useCallback } = vi.mocked(React);
+const { useCallback, useDebugValue } = vi.mocked(React);
 useCallback.mockImplementation((fn) => fn);
 
 // Mock `useSWRConfig`
@@ -78,6 +78,12 @@ describe("createMutateHook", () => {
     );
   });
 
+  it("invokes debug value hook with client prefix", () => {
+    useMutate();
+
+    expect(useDebugValue).toHaveBeenLastCalledWith("<unique-key>");
+  });
+
   describe("useMutate -> mutate -> key matcher", () => {
     it("returns false for non-array keys", async () => {
       await mutate(["/pet/findByStatus"]);

src/__test__/query-base.test.ts

@@ -7,7 +7,7 @@ import type { paths } from "./fixtures/petstore.js";
 
 // Mock `useCallback` (return given function as-is)
 vi.mock("react");
-const { useCallback, useMemo } = vi.mocked(React);
+const { useCallback, useMemo, useDebugValue } = vi.mocked(React);
 useCallback.mockImplementation((fn) => fn);
 useMemo.mockImplementation((fn) => fn());
 
@@ -113,4 +113,14 @@ describe("configureBaseQueryHook", () => {
       { errorRetryCount: 56 },
     );
   });
+
+  it("invokes debug value hook with path", () => {
+    useQuery("/pet/findByStatus");
+
+    expect(useDebugValue).toHaveBeenLastCalledWith("/pet/findByStatus");
+
+    useQuery("/pet/{petId}", { params: { path: { petId: 4 } } });
+
+    expect(useDebugValue).toHaveBeenLastCalledWith("/pet/{petId}");
+  });
 });

src/infinite.ts

@@ -6,7 +6,7 @@ import useSWRInfinite, {
   type SWRInfiniteKeyLoader,
 } from "swr/infinite";
 import type { TypesForGetRequest } from "./types.js";
-import { useCallback } from "react";
+import { useCallback, useDebugValue } from "react";
 
 /**
  * ```ts
@@ -50,6 +50,8 @@ export function createInfiniteHook<
     type Key = [Prefix, Path, Init | undefined] | null;
     type KeyLoader = SWRInfiniteKeyLoader<Data, Key>;
 
+    useDebugValue(path);
+
     const fetcher: SWRInfiniteFetcher<Data, KeyLoader> = useCallback(
       async ([_, path, init]) => {
         // @ts-expect-error TODO: Improve internal init types

src/mutate.ts

@@ -1,6 +1,6 @@
 import type { Client } from "openapi-fetch";
 import type { MediaType, PathsWithMethod } from "openapi-typescript-helpers";
-import { useCallback } from "react";
+import { useCallback, useDebugValue } from "react";
 import { type MutatorCallback, type MutatorOptions, useSWRConfig } from "swr";
 import type { PartialDeep } from "type-fest";
 import type { TypesForGetRequest } from "./types.js";
@@ -39,6 +39,8 @@ export function createMutateHook<
   return function useMutate() {
     const { mutate: swrMutate } = useSWRConfig();
 
+    useDebugValue(prefix);
+
     function mutate<
       Path extends PathsWithMethod<Paths, "get">,
       R extends TypesForGetRequest<Paths, Path>,

src/query-base.ts

@@ -6,7 +6,7 @@ import type {
 } from "openapi-typescript-helpers";
 import type { Fetcher, SWRHook } from "swr";
 import type { TypesForGetRequest } from "./types.js";
-import { useCallback, useMemo } from "react";
+import { useCallback, useDebugValue, useMemo } from "react";
 
 /**
  * @private
@@ -30,6 +30,8 @@ export function configureBaseQueryHook(useHook: SWRHook) {
         ? [(Init | null)?, Config?]
         : [Init | null, Config?]
     ) {
+      useDebugValue(path);
+
       const key = useMemo(
         () => (init !== null ? ([prefix, path, init] as const) : null),
         [prefix, path, init],