fix(client): fix SWRConfiguration options, add typescript test case f…

…or SWRConfig types

fixes: #50

packages/client/src/createSWRProxyHooks.tsx

@@ -26,7 +26,7 @@ type DecorateProcedure<
   ? {
       useSWR: <
         TData = inferProcedureOutput<TProcedure>,
-        TConfig extends SWRConfiguration<TData> = {}
+        TConfig extends SWRConfiguration<TData> = SWRConfiguration<TData>
       >(
         input: inferProcedureInput<TProcedure>,
         opts?: TConfig & {

test/unit/tests/query.spec.tsx

@@ -4,74 +4,87 @@ import { expect, expectTypeOf, it } from "vitest";
 import { render, screen, trpc, waitFor } from "../utils";
 
 it("makes query without args", async () => {
-	const Component = () => {
-		const { data } = trpc.hello.useSWR();
+  const Component = () => {
+    const { data } = trpc.hello.useSWR();
 
-		return data ? <p>{data}</p> : <div>Loading...</div>;
-	};
+    return data ? <p>{data}</p> : <div>Loading...</div>;
+  };
 
-	render(<Component />);
+  render(<Component />);
 
-	expect(screen.getByText("Loading...")).toBeInTheDocument();
+  expect(screen.getByText("Loading...")).toBeInTheDocument();
 
-	await waitFor(() => {
-		expect(screen.getByText("world")).toBeInTheDocument();
-	});
+  await waitFor(() => {
+    expect(screen.getByText("world")).toBeInTheDocument();
+  });
 });
 
 it("makes query with args", async () => {
-	const Component = () => {
-		const { data: user } = trpc.user.get.useSWR({ id: 1 });
+  const Component = () => {
+    const { data: user } = trpc.user.get.useSWR({ id: 1 });
 
-		return user ? <p>{user.name}</p> : <div>Loading...</div>;
-	};
+    return user ? <p>{user.name}</p> : <div>Loading...</div>;
+  };
 
-	render(<Component />);
+  render(<Component />);
 
-	expect(screen.getByText("Loading...")).toBeInTheDocument();
+  expect(screen.getByText("Loading...")).toBeInTheDocument();
 
-	await waitFor(() => {
-		expect(screen.getByText("bar")).toBeInTheDocument();
-	});
+  await waitFor(() => {
+    expect(screen.getByText("bar")).toBeInTheDocument();
+  });
 });
 
 it("makes conditional query", async () => {
-	const Component = () => {
-		const [shouldFetch, setShouldFetch] = useState(true);
+  const Component = () => {
+    const [shouldFetch, setShouldFetch] = useState(true);
 
-		const { data } = trpc.hello.useSWR(undefined, {
-			isDisabled: !shouldFetch,
-		});
+    const { data } = trpc.hello.useSWR(undefined, {
+      isDisabled: !shouldFetch,
+    });
 
-		return (
-			<>
-				<button onClick={() => setShouldFetch(false)}>toggle</button>
-				<div>{data ? data : "disabled"}</div>
-			</>
-		);
-	};
+    return (
+      <>
+        <button onClick={() => setShouldFetch(false)}>toggle</button>
+        <div>{data ? data : "disabled"}</div>
+      </>
+    );
+  };
 
-	render(<Component />);
+  render(<Component />);
 
-	await waitFor(() => {
-		expect(screen.getByText("world")).toBeInTheDocument();
-	});
+  await waitFor(() => {
+    expect(screen.getByText("world")).toBeInTheDocument();
+  });
 
-	const toggleButton = await screen.findByText("toggle");
+  const toggleButton = await screen.findByText("toggle");
 
-	act(() => toggleButton.click());
+  act(() => toggleButton.click());
 
-	await waitFor(() => {
-		expect(screen.getByText("disabled")).toBeInTheDocument();
-	});
+  await waitFor(() => {
+    expect(screen.getByText("disabled")).toBeInTheDocument();
+  });
 });
 
 it("Allows correct types during suspense", async () => {
-	() => {
-		const { data } = trpc.hello.useSWR(void 0, { suspense: true});
+  () => {
+    const { data } = trpc.hello.useSWR(void 0, { suspense: true });
 
-		expectTypeOf(data).toBeString();
+    expectTypeOf(data).toBeString();
 
-		return <p>{data}</p>;
-	};
-})
+    return <p>{data}</p>;
+  };
+});
+
+it("Has correct SWR option types", async () => {
+  () => {
+    const { data } = trpc.hello.useSWR(void 0, {
+      suspense: true,
+      onSuccess: (data) => {
+        expectTypeOf(data).toBeString();
+      },
+    });
+
+    return <p>{data}</p>;
+  };
+});