Add invalid response button to vite example

example-projects/vite/src/github/client.ts

@@ -1,5 +1,5 @@
 import type FetchT from "@notainc/typed-api-spec/fetch";
-import type { Spec } from "./spec.ts";
+import type { InvalidResponseSpec, Spec } from "./spec.ts";
 export const GITHUB_API_ORIGIN = "https://api.github.com";
 
 let fetchGitHub = fetch as FetchT<typeof GITHUB_API_ORIGIN, Spec>;
@@ -15,4 +15,22 @@ if (import.meta.env.DEV) {
     v.res,
   ) as typeof fetchGitHub;
 }
-export default fetchGitHub;
+
+let fetchInvalidResponseGitHub = fetch as FetchT<
+  typeof GITHUB_API_ORIGIN,
+  InvalidResponseSpec
+>;
+if (import.meta.env.DEV) {
+  const { withValidation } = await import("@notainc/typed-api-spec/fetch");
+  const { InvalidResponseZodSpec } = await import("./spec.ts");
+  const { newZodValidator } = await import("@notainc/typed-api-spec");
+  const v = newZodValidator(InvalidResponseZodSpec);
+  fetchInvalidResponseGitHub = withValidation(
+    fetch,
+    InvalidResponseZodSpec,
+    v.req,
+    v.res,
+  ) as typeof fetchInvalidResponseGitHub;
+}
+
+export { fetchGitHub, fetchInvalidResponseGitHub };

example-projects/vite/src/github/spec.ts

@@ -21,3 +21,15 @@ export const ZodSpec = {
   },
 } satisfies ZodApiEndpoints;
 export type Spec = ToApiEndpoints<typeof ZodSpec>;
+
+// See https://docs.github.com/ja/rest/repos/repos?apiVersion=2022-11-28#get-all-repository-topics
+export const InvalidResponseZodSpec = {
+  "/repos/:owner/:repo/topics": {
+    get: {
+      responses: {
+        200: { body: z.object({ noexistProps: z.string().array() }) },
+      },
+    },
+  },
+} satisfies ZodApiEndpoints;
+export type InvalidResponseSpec = ToApiEndpoints<typeof InvalidResponseZodSpec>;

example-projects/vite/src/main.ts

@@ -1,22 +1,29 @@
 import "./style.css";
-import fetchGitHub, { GITHUB_API_ORIGIN } from "./github/client.ts";
+import {
+  fetchGitHub,
+  fetchInvalidResponseGitHub,
+  GITHUB_API_ORIGIN,
+} from "./github/client.ts";
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
     <h1>typed-api-spec + Vite</h1>
     <div class="card">
       <button id="fetch" type="button">Fetch from GitHub</button>
     </div>
+    <div class="card">
+      <button id="invalid-fetch" type="button">Invalid fetch from GitHub</button>
+    </div>
     <p id="result">
       Topics of typed-api-spec will be displayed here after clicking the button.
     </p>
   </div>
 `;
 
 const endpoint = `${GITHUB_API_ORIGIN}/repos/nota/typed-api-spec/topics`;
+const result = document.querySelector<HTMLParagraphElement>("#result")!;
 
 const fetchButton = document.querySelector<HTMLButtonElement>("#fetch")!;
-const result = document.querySelector<HTMLParagraphElement>("#result")!;
 const request = async () => {
   result.innerHTML = "Loading...";
   const response = await fetchGitHub(endpoint, {});
@@ -28,3 +35,21 @@ const request = async () => {
   result.innerHTML = `Result: ${names.join(", ")}`;
 };
 fetchButton.addEventListener("click", () => request());
+
+const invalidFetchButton =
+  document.querySelector<HTMLButtonElement>("#invalid-fetch")!;
+const invalidRequest = async () => {
+  result.innerHTML = "Loading...";
+  try {
+    const response = await fetchInvalidResponseGitHub(endpoint, {});
+    if (!response.ok) {
+      result.innerHTML = `Error: ${response.status} ${response.statusText}`;
+      return;
+    }
+    const { noexistProps } = await response.json();
+    result.innerHTML = `Result: ${noexistProps.join(", ")}`;
+  } catch (e) {
+    result.innerHTML = `${e}`;
+  }
+};
+invalidFetchButton.addEventListener("click", () => invalidRequest());