Migrate current react-query impl to typescript

Author: kerwanp

packages/openapi-react-query/src/index.ts

@@ -1,104 +1,65 @@
 import {
-  UseMutationOptions,
-  UseMutationResult,
-  UseQueryOptions,
-  UseQueryResult,
-  UseSuspenseQueryOptions,
-  UseSuspenseQueryResult,
+  type UseMutationOptions,
+  type UseMutationResult,
+  type UseQueryOptions,
+  type UseQueryResult,
+  type UseSuspenseQueryOptions,
+  type UseSuspenseQueryResult,
   useMutation,
   useQuery,
 } from "@tanstack/react-query";
-import {
-  ClientMethod,
-  FetchResponse,
-  MaybeOptionalInit,
-  OpenapiClient,
-} from "openapi-fetch";
-import {
-  HasRequiredKeys,
-  HttpMethod,
-  MediaType,
-  PathsWithMethod,
-} from "openapi-typescript-helpers";
+import type { ClientMethod, FetchResponse, MaybeOptionalInit, OpenapiClient } from "openapi-fetch";
+import type { HasRequiredKeys, HttpMethod, MediaType, PathsWithMethod } from "openapi-typescript-helpers";
 
-export type UseQueryMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = {
-  <
-    Method extends HttpMethod,
-    Path extends PathsWithMethod<Paths, Method>,
-    Init extends MaybeOptionalInit<Paths[Path], Method>,
-    Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
-    Options extends Omit<
-      UseQueryOptions<Response["data"], Response["error"]>,
-      "queryKey" | "queryFn"
-    >,
-  >(
-    method: Method,
-    url: Path,
-    ...[init, options]: HasRequiredKeys<Init> extends never
-      ? [(Init & { [key: string]: unknown })?, Options?]
-      : [Init & { [key: string]: unknown }, Options?]
-  ): UseQueryResult<Response["data"], Response["error"]>;
-};
+export type UseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
+  Method extends HttpMethod,
+  Path extends PathsWithMethod<Paths, Method>,
+  Init extends MaybeOptionalInit<Paths[Path], Method>,
+  Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
+  Options extends Omit<UseQueryOptions<Response["data"], Response["error"]>, "queryKey" | "queryFn">,
+>(
+  method: Method,
+  url: Path,
+  ...[init, options]: HasRequiredKeys<Init> extends never
+    ? [(Init & { [key: string]: unknown })?, Options?]
+    : [Init & { [key: string]: unknown }, Options?]
+) => UseQueryResult<Response["data"], Response["error"]>;
 
-export type UseSuspenseQueryMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = {
-  <
-    Method extends HttpMethod,
-    Path extends PathsWithMethod<Paths, Method>,
-    Init extends MaybeOptionalInit<Paths[Path], Method>,
-    Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
-    Options extends Omit<
-      UseSuspenseQueryOptions<Response["data"], Response["error"]>,
-      "queryKey" | "queryFn"
-    >,
-  >(
-    method: Method,
-    url: Path,
-    ...[init, options]: HasRequiredKeys<Init> extends never
-      ? [(Init & { [key: string]: unknown })?, Options?]
-      : [Init & { [key: string]: unknown }, Options?]
-  ): UseSuspenseQueryResult<Response["data"], Response["error"]>;
-};
+export type UseSuspenseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
+  Method extends HttpMethod,
+  Path extends PathsWithMethod<Paths, Method>,
+  Init extends MaybeOptionalInit<Paths[Path], Method>,
+  Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
+  Options extends Omit<UseSuspenseQueryOptions<Response["data"], Response["error"]>, "queryKey" | "queryFn">,
+>(
+  method: Method,
+  url: Path,
+  ...[init, options]: HasRequiredKeys<Init> extends never
+    ? [(Init & { [key: string]: unknown })?, Options?]
+    : [Init & { [key: string]: unknown }, Options?]
+) => UseSuspenseQueryResult<Response["data"], Response["error"]>;
 
-export type UseMutationMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = {
-  <
-    Method extends HttpMethod,
-    Path extends PathsWithMethod<Paths, Method>,
-    Init extends MaybeOptionalInit<Paths[Path], Method>,
-    Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
-    Options extends Omit<
-      UseMutationOptions<Response["data"], Response["error"], Init>,
-      "mutationKey" | "mutationFn"
-    >,
-  >(
-    method: Method,
-    url: Path,
-    options?: Options,
-    // TODO: Add support for Partial request options that become optional in UseMutationResult Context
-  ): UseMutationResult<Response["data"], Response["error"], Init>;
-};
+export type UseMutationMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
+  Method extends HttpMethod,
+  Path extends PathsWithMethod<Paths, Method>,
+  Init extends MaybeOptionalInit<Paths[Path], Method>,
+  Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
+  Options extends Omit<UseMutationOptions<Response["data"], Response["error"], Init>, "mutationKey" | "mutationFn">,
+>(
+  method: Method,
+  url: Path,
+  options?: Options,
+) => UseMutationResult<Response["data"], Response["error"], Init>;
 
-export interface OpenapiQueryClient<
-  Paths extends {},
-  Media extends MediaType = MediaType,
-> {
+export interface OpenapiQueryClient<Paths extends {}, Media extends MediaType = MediaType> {
   useQuery: UseQueryMethod<Paths, Media>;
   useSuspenseQery: any;
   useMutation: UseMutationMethod<Paths, Media>;
 }
 
-export default function createClient<
-  Paths extends {},
-  Media extends MediaType = MediaType,
->(client: OpenapiClient<Paths, Media>): OpenapiQueryClient<Paths, Media> {
+export default function createClient<Paths extends {}, Media extends MediaType = MediaType>(
+  client: OpenapiClient<Paths, Media>,
+): OpenapiQueryClient<Paths, Media> {
   return {
     useQuery: (method, path, ...[init, options]) => {
       return useQuery({
@@ -107,7 +68,9 @@ export default function createClient<
           const mth = method.toUpperCase() as keyof typeof client;
           const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
           const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
-          if (error || !data) throw error;
+          if (error || !data) {
+            throw error;
+          }
           return data;
         },
         ...options,
@@ -121,7 +84,9 @@ export default function createClient<
           const mth = method.toUpperCase() as keyof typeof client;
           const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
           const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
-          if (error || !data) throw error;
+          if (error || !data) {
+            throw error;
+          }
           return data;
         },
         ...options,

packages/openapi-react-query/test/index.test.tsx

@@ -1,9 +1,5 @@
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
-import {
-  server,
-  baseUrl,
-  useMockRequestHandler,
-} from "./fixtures/mock-server.js";
+import { server, baseUrl, useMockRequestHandler } from "./fixtures/mock-server.js";
 import type { paths } from "./fixtures/api.js";
 import createClient from "../src/index.js";
 import createFetchClient from "openapi-fetch";
@@ -14,9 +10,7 @@ import React, { type ReactNode } from "react";
 beforeAll(() => {
   server.listen({
     onUnhandledRequest: (request) => {
-      throw new Error(
-        `No request handler found for ${request.method} ${request.url}`,
-      );
+      throw new Error(`No request handler found for ${request.method} ${request.url}`);
     },
   });
 });
@@ -75,12 +69,9 @@ describe("client", () => {
         body: { message: "OK" },
       });
 
-      const { result } = renderHook(
-        () => client.useMutation("get", "/tag/{name}"),
-        {
-          wrapper,
-        },
-      );
+      const { result } = renderHook(() => client.useMutation("get", "/tag/{name}"), {
+        wrapper,
+      });
 
       result.current.mutate({
         params: {