feat: support path-index call style (client["/path"].GET(...))

Author: gzm0

packages/openapi-fetch/src/index.d.ts

@@ -167,7 +167,13 @@ export type ClientMethod<
     : [Init & { [key: string]: unknown }]
 ) => Promise<FetchResponse<Paths[Path][Method], Init, Media>>;
 
-export interface Client<Paths extends {}, Media extends MediaType = MediaType> {
+export type ClientForPath<PathInfo extends Record<HttpMethod, {}>, Media extends MediaType> = {
+  [Method in keyof PathInfo as Uppercase<string & Method>]: <
+    Init extends MaybeOptionalInit<PathInfo, Method>,
+  >() => Promise<FetchResponse<PathInfo[Method], Init, Media>>;
+};
+
+export type Client<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType = MediaType> = {
   /** Call a GET endpoint */
   GET: ClientMethod<Paths, "get", Media>;
   /** Call a PUT endpoint */
@@ -188,7 +194,9 @@ export interface Client<Paths extends {}, Media extends MediaType = MediaType> {
   use(...middleware: Middleware[]): void;
   /** Unregister middleware */
   eject(...middleware: Middleware[]): void;
-}
+} & {
+  [Path in keyof Paths]: ClientForPath<Paths[Path], Media>;
+};
 
 export default function createClient<Paths extends {}, Media extends MediaType = MediaType>(
   clientOptions?: ClientOptions,

packages/openapi-fetch/src/index.js

@@ -176,39 +176,10 @@ export default function createClient(clientOptions) {
     return { error, response };
   }
 
-  return {
-    /** Call a GET endpoint */
-    async GET(url, init) {
-      return coreFetch(url, { ...init, method: "GET" });
-    },
-    /** Call a PUT endpoint */
-    async PUT(url, init) {
-      return coreFetch(url, { ...init, method: "PUT" });
-    },
-    /** Call a POST endpoint */
-    async POST(url, init) {
-      return coreFetch(url, { ...init, method: "POST" });
-    },
-    /** Call a DELETE endpoint */
-    async DELETE(url, init) {
-      return coreFetch(url, { ...init, method: "DELETE" });
-    },
-    /** Call a OPTIONS endpoint */
-    async OPTIONS(url, init) {
-      return coreFetch(url, { ...init, method: "OPTIONS" });
-    },
-    /** Call a HEAD endpoint */
-    async HEAD(url, init) {
-      return coreFetch(url, { ...init, method: "HEAD" });
-    },
-    /** Call a PATCH endpoint */
-    async PATCH(url, init) {
-      return coreFetch(url, { ...init, method: "PATCH" });
-    },
-    /** Call a TRACE endpoint */
-    async TRACE(url, init) {
-      return coreFetch(url, { ...init, method: "TRACE" });
-    },
+  // Poor-man's set.
+  const methods = { GET: 0, PUT: 0, POST: 0, DELETE: 0, OPTIONS: 0, HEAD: 0, PATCH: 0, TRACE: 0 };
+
+  const coreClient = {
     /** Register middleware */
     use(...middleware) {
       for (const m of middleware) {
@@ -231,6 +202,25 @@ export default function createClient(clientOptions) {
       }
     },
   };
+
+  const handler = {
+    get: (coreClient, property) => {
+      if (property in coreClient) {
+        return coreClient[property];
+      }
+
+      if (property in methods) {
+        return (url, init) => coreFetch(url, { ...init, method: property });
+      }
+
+      // Assume the property is a URL.
+      return Object.fromEntries(
+        Object.keys(methods).map((method) => [method, (init) => coreFetch(property, { ...init, method })]),
+      );
+    },
+  };
+
+  return new Proxy(coreClient, handler);
 }
 
 // utils

packages/openapi-fetch/test/index.test.ts

@@ -21,19 +21,6 @@ afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 describe("client", () => {
-  it("generates all proper functions", () => {
-    const client = createClient<paths>();
-
-    expect(client).toHaveProperty("GET");
-    expect(client).toHaveProperty("PUT");
-    expect(client).toHaveProperty("POST");
-    expect(client).toHaveProperty("DELETE");
-    expect(client).toHaveProperty("OPTIONS");
-    expect(client).toHaveProperty("HEAD");
-    expect(client).toHaveProperty("PATCH");
-    expect(client).toHaveProperty("TRACE");
-  });
-
   describe("TypeScript checks", () => {
     it("marks data or error as undefined, but never both", async () => {
       const client = createClient<paths>({
@@ -1843,6 +1830,19 @@ describe("client", () => {
       );
     });
   });
+
+  describe("path style call", () => {
+    it("sends the correct method", async () => {
+      const client = createClient<paths>({ baseUrl });
+      const { getRequest } = useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/anyMethod",
+      });
+      await client["/anyMethod"].GET();
+      expect(getRequest().method).toBe("GET");
+    });
+  });
 });
 
 // test that the library behaves as expected inside commonly-used patterns