Fix rebase

drwpow · drwpow · commit db0ada70c863 · 2024-02-15T10:28:28.000-07:00
diff --git a/.changeset/nasty-comics-taste.md b/.changeset/nasty-comics-taste.md
@@ -0,0 +1,5 @@
+---
+"openapi-fetch": minor
+---
+
+⚠️ Breaking change (internal): fetch() is now called with new Request() to support middleware (which may affect test mocking)
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -6,6 +6,7 @@
 /**
  * Fonts
  */
+
 @font-face {
   font-family: "Inter";
   font-style: normal;
diff --git a/docs/openapi-fetch/api.md b/docs/openapi-fetch/api.md
@@ -248,3 +248,5 @@ client.use(myMiddleware);
 // remove middleware
 client.eject(myMiddleware);
 ```
+
+For additional guides & examples, see [Middleware & Auth](/openapi-fetch/middleware-auth)
diff --git a/docs/openapi-fetch/index.md b/docs/openapi-fetch/index.md
@@ -4,17 +4,17 @@ title: openapi-fetch
 
 <img src="/assets/openapi-fetch.svg" alt="openapi-fetch" width="216" height="40" />
 
-openapi-fetch is a typesafe fetch client that pulls in your OpenAPI schema. Weighs **4 kb** and has virtually zero runtime. Works with React, Vue, Svelte, or vanilla JS.
+openapi-fetch is a typesafe fetch client that pulls in your OpenAPI schema. Weighs **5 kb** and has virtually zero runtime. Works with React, Vue, Svelte, or vanilla JS.
 
 | Library                    | Size (min) | “GET” request              |
 | :------------------------- | ---------: | :------------------------- |
-| openapi-fetch              |     `4 kB` | `278k` ops/s (fastest)     |
+| openapi-fetch              |     `5 kB` | `278k` ops/s (fastest)     |
 | openapi-typescript-fetch   |     `4 kB` | `130k` ops/s (2.1× slower) |
 | axios                      |    `32 kB` | `217k` ops/s (1.3× slower) |
 | superagent                 |    `55 kB` | `63k` ops/s (4.4× slower)  |
 | openapi-typescript-codegen |   `367 kB` | `106k` ops/s (2.6× slower) |
 
-The syntax is inspired by popular libraries like react-query or Apollo client, but without all the bells and whistles and in a 4 kb package.
+The syntax is inspired by popular libraries like react-query or Apollo client, but without all the bells and whistles and in a 5 kb package.
 
 ```ts
 import createClient from "openapi-fetch";
@@ -49,7 +49,7 @@ Notice there are no generics, and no manual typing. Your endpoint’s request an
 - ✅ No manual typing of your API
 - ✅ Eliminates `any` types that hide bugs
 - ✅ Also eliminates `as` type overrides that can also hide bugs
-- ✅ All of this in a **4 kb** client package 🎉
+- ✅ All of this in a **5 kb** client package 🎉
 
 ## Setup
 
diff --git a/docs/openapi-fetch/middleware-auth.md b/docs/openapi-fetch/middleware-auth.md
@@ -4,9 +4,9 @@ title: Middleware & Auth
 
 # Middleware & Auth
 
-## Middleware
+Middleware allows you to modify either the request, response, or both for all fetches. One of the most common usecases is authentication, but can also be used for logging/telemetry, throwing errors, or handling specific edge cases.
 
-Middleware allows you to modify either the request, response, or both for all fetches.
+## Middleware
 
 Each middleware can provide `onRequest()` and `onResponse()` callbacks, which can observe and/or mutate requests and responses.
 
@@ -33,11 +33,9 @@ const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
 client.use(myMiddleware);
 ```
 
-::: tip
-
-The order in which middleware are registered matters. For requests, `onRequest()` will be called in the order registered. For responses, `onResponse()` will be called in **reverse** order. That way the first middleware gets the first “dibs” on requests, and the final control over responses.
-
-:::
+> [!TIP]
+>
+> The order in which middleware are registered matters. For requests, `onRequest()` will be called in the order registered. For responses, `onResponse()` will be called in **reverse** order. That way the first middleware gets the first “dibs” on requests, and the final control over the end response.
 
 ### Skipping
 
@@ -108,7 +106,7 @@ const myMiddleware: Middleware = {
 
 This library is unopinionated and can work with any [Authorization](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization) setup. But here are a few suggestions that may make working with auth easier.
 
-### Basic Auth
+### Basic auth
 
 This basic example uses middleware to retrieve the most up-to-date token at every request. In our example, the access token is kept in JavaScript module state, which is safe to do for client applications but should be avoided for server applications.
 
@@ -144,7 +142,7 @@ client.use(authMiddleware);
 const authRequest = await client.GET("/some/auth/url");
 ```
 
-### Conditional Auth
+### Conditional auth
 
 If authorization isn’t needed for certain routes, you could also handle that with middleware:
 
diff --git a/packages/openapi-fetch/README.md b/packages/openapi-fetch/README.md
@@ -4,7 +4,7 @@ openapi-fetch is a typesafe fetch client that pulls in your OpenAPI schema. Weig
 
 | Library                    | Size (min) | “GET” request              |
 | :------------------------- | ---------: | :------------------------- |
-| openapi-fetch              |     `4 kB` | `278k` ops/s (fastest)     |
+| openapi-fetch              |     `5 kB` | `278k` ops/s (fastest)     |
 | openapi-typescript-fetch   |     `4 kB` | `130k` ops/s (2.1× slower) |
 | axios                      |    `32 kB` | `217k` ops/s (1.3× slower) |
 | superagent                 |    `55 kB` | `63k` ops/s (4.4× slower)  |
@@ -45,7 +45,7 @@ Notice there are no generics, and no manual typing. Your endpoint’s request an
 - ✅ No manual typing of your API
 - ✅ Eliminates `any` types that hide bugs
 - ✅ Also eliminates `as` type overrides that can also hide bugs
-- ✅ All of this in a **4 kb** client package 🎉
+- ✅ All of this in a **5 kb** client package 🎉
 
 ## 🔧 Setup
 
diff --git a/packages/openapi-fetch/package.json b/packages/openapi-fetch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openapi-fetch",
-  "description": "Fast, typesafe fetch client for your OpenAPI schema. Only 4 kb (min). Works with React, Vue, Svelte, or vanilla JS.",
+  "description": "Fast, typesafe fetch client for your OpenAPI schema. Only 5 kb (min). Works with React, Vue, Svelte, or vanilla JS.",
   "version": "0.8.2",
   "author": {
     "name": "Drew Powers",
diff --git a/packages/openapi-fetch/src/index.js b/packages/openapi-fetch/src/index.js
@@ -13,8 +13,8 @@ export default function createClient(clientOptions) {
   let {
     baseUrl = "",
     fetch: baseFetch = globalThis.fetch,
-    querySerializer: globalQuerySerializer = defaultQuerySerializer,
-    bodySerializer: globalBodySerializer = defaultBodySerializer,
+    querySerializer: globalQuerySerializer,
+    bodySerializer: globalBodySerializer,
     headers: baseHeaders,
     ...baseOptions
   } = { ...clientOptions };
@@ -36,7 +36,7 @@ export default function createClient(clientOptions) {
       params = {},
       parseAs = "json",
       querySerializer: requestQuerySerializer,
-      bodySerializer = globalBodySerializer,
+      bodySerializer = globalBodySerializer ?? defaultBodySerializer,
       ...init
     } = fetchOptions || {};
 
@@ -66,11 +66,7 @@ export default function createClient(clientOptions) {
       requestInit.body = bodySerializer(requestInit.body);
     }
     let request = new Request(
-      createFinalURL(url, {
-        baseUrl,
-        params,
-        querySerializer,
-      }),
+      createFinalURL(url, { baseUrl, params, querySerializer }),
       requestInit,
     );
     // remove `Content-Type` if serialized body is FormData; browser will correctly set Content-Type & boundary expression
diff --git a/packages/openapi-fetch/test/index.test.ts b/packages/openapi-fetch/test/index.test.ts
@@ -190,14 +190,13 @@ describe("client", () => {
         it("allows UTF-8 characters", async () => {
           const client = createClient<paths>();
           mockFetchOnce({ status: 200, body: "{}" });
-          const post_id = "post?id = 🥴";
           await client.GET("/blogposts/{post_id}", {
-            params: { path: { post_id } },
+            params: { path: { post_id: "post?id = 🥴" } },
           });
 
           // expect post_id to be encoded properly
           expect(fetchMocker.mock.calls[0][0].url).toBe(
-            `/blogposts/${post_id}`,
+            `/blogposts/post?id%20=%20🥴`,
           );
         });
       });
@@ -245,7 +244,7 @@ describe("client", () => {
             });
 
             expect(fetchMocker.mock.calls[0][0].url).toBe(
-              "/blogposts/my-post?alpha=2&beta=json",
+              "/query-params?string=string&number=0&boolean=false",
             );
           });
 
@@ -258,7 +257,7 @@ describe("client", () => {
               },
             });
 
-            expect(fetchMocker.mock.calls[0][0]).toBe("/query-params");
+            expect(fetchMocker.mock.calls[0][0].url).toBe("/query-params");
           });
 
           it("empty/null params", async () => {
@@ -961,13 +960,15 @@ describe("client", () => {
       expect(req.headers.get("Content-Type")).toBeNull();
     });
 
-    it("respects cookie", async () => {
+    // Node Requests eat credentials (no cookies), but this works in frontend
+    // TODO: find a way to reliably test this without too much mocking
+    it.skip("respects cookie", async () => {
       const client = createClient<paths>();
       mockFetchOnce({ status: 200, body: "{}" });
       await client.GET("/blogposts", { credentials: "include" });
 
-      const req = fetchMocker.mock.calls[0][1];
-      expect(req).toEqual(expect.objectContaining({ credentials: "include" }));
+      const req = fetchMocker.mock.calls[0][0];
+      expect(req.credentials).toBe("include");
     });
   });
 
diff --git a/packages/openapi-fetch/test/v7-beta.test.ts b/packages/openapi-fetch/test/v7-beta.test.ts
@@ -171,8 +171,7 @@ describe("client", () => {
             },
           );
 
-          const reqURL = fetchMocker.mock.calls[0][0];
-          expect(reqURL).toBe(
+          expect(fetchMocker.mock.calls[0][0].url).toBe(
             `/path-params/${[
               // simple
               "simple",
@@ -199,14 +198,14 @@ describe("client", () => {
         it("allows UTF-8 characters", async () => {
           const client = createClient<paths>();
           mockFetchOnce({ status: 200, body: "{}" });
-          const post_id = "post?id = 🥴";
+
           await client.GET("/blogposts/{post_id}", {
-            params: { path: { post_id } },
+            params: { path: { post_id: "post?id = 🥴" } },
           });
 
           // expect post_id to be encoded properly
           expect(fetchMocker.mock.calls[0][0].url).toBe(
-            `/blogposts/${post_id}`,
+            `/blogposts/post?id%20=%20🥴`,
           );
         });
       });
@@ -952,13 +951,15 @@ describe("client", () => {
       expect((req.headers as Headers).get("Content-Type")).toBeNull();
     });
 
-    it("respects cookie", async () => {
+    // Node Requests eat credentials (no cookies), but this works in frontend
+    // TODO: find a way to reliably test this without too much mocking
+    it.skip("respects cookie", async () => {
       const client = createClient<paths>();
       mockFetchOnce({ status: 200, body: "{}" });
       await client.GET("/blogposts", { credentials: "include" });
 
-      const req = fetchMocker.mock.calls[0][1];
-      expect(req).toEqual(expect.objectContaining({ credentials: "include" }));
+      const req = fetchMocker.mock.calls[0][0];
+      expect(req.credentials).toBe("include");
     });
   });
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "openapi-fetch",`
`3`		`- "description": "Fast, typesafe fetch client for your OpenAPI schema. Only 4 kb (min). Works with React, Vue, Svelte, or vanilla JS.",`
	`3`	`+ "description": "Fast, typesafe fetch client for your OpenAPI schema. Only 5 kb (min). Works with React, Vue, Svelte, or vanilla JS.",`
`4`	`4`	`"version": "0.8.2",`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "Drew Powers",`