feat: setup msw to avoid 429 issues with stackoverflow

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
+import { msw } from "./src/plugins/msw";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import pagefind from "astro-pagefind";
@@ -9,16 +10,15 @@ import vercel from "@astrojs/vercel/serverless";
 
 export default defineConfig({
   // https://astro.build/config
-  integrations: [tailwind(), mdx(), react(), pagefind()],
+  integrations: [tailwind(), mdx(), react(), pagefind(), msw()],
   image: {
     service: {
       // Process images with sharp: https://docs.astro.build/en/guides/assets/#using-sharp
       entrypoint: "astro/assets/services/sharp",
     },
   },
-  markdown: {
-    remarkPlugins: [remarkReadingTime],
-  },
+  prefetch: { prefetchAll: true },
+  markdown: { remarkPlugins: [remarkReadingTime] },
   output: "hybrid",
   adapter: vercel(),
 });

package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "msw": "^2.5.0",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.5"

src/mocks/handlers.ts

@@ -0,0 +1,57 @@
+import type { z } from "astro/zod";
+import { http, HttpResponse } from "msw";
+import type { TokenSchema, RecentlyPlayedSchema } from "src/pages/api/spotify";
+import type { StackOverflow } from "src/pages/api/stackoverflow";
+
+export const handlers = [
+  http.get("https://api.stackexchange.com/2.2/users/*", () => {
+    const result: z.infer<typeof StackOverflow> = {
+      items: [
+        {
+          badge_counts: { bronze: 69, silver: 420, gold: 547 },
+          account_id: 7095009,
+          is_employee: false,
+          last_modified_date: 1673043300,
+          last_access_date: 1728734459,
+          reputation_change_year: 40,
+          reputation_change_quarter: 0,
+          reputation_change_month: 0,
+          reputation_change_week: 0,
+          reputation_change_day: 0,
+          reputation: 968,
+          creation_date: 1444416602,
+          user_type: "registered",
+          user_id: 5428936,
+          location: "Littlehampton, UK",
+          website_url: "",
+          link: "https://stackoverflow.com/users/5428936/kieran-osgood",
+          profile_image: "https://i.sstatic.net/FjChe.png?s=256",
+          display_name: "Kieran Osgood",
+        },
+      ],
+    };
+    return HttpResponse.json(result);
+  }),
+
+  http.post("https://accounts.spotify.com/api/token", () => {
+    const result: z.infer<typeof TokenSchema> = {
+      access_token: "token",
+    };
+    return HttpResponse.json(result);
+  }),
+
+  http.get("https://api.spotify.com/v1/me/player/recently-played", () => {
+    const result: z.infer<typeof RecentlyPlayedSchema> = {
+      items: [
+        {
+          track: {
+            name: "the bad anthem",
+            artists: [{ name: "senor badass" }],
+            external_urls: { spotify: "spotify.com/track" },
+          },
+        },
+      ],
+    };
+    return HttpResponse.json(result);
+  }),
+];

src/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

src/pages/about.astro

@@ -2,11 +2,14 @@
 import Screen from "@layouts/screen.astro";
 import AboutComp from "@components/about/index.astro";
 import Text from "@components/core/text";
-import Spotify from "@components/about/spotify.tsx";
 import CommitActivity from "@components/about/commit-activity.tsx";
-import StackOverflow from "@components/about/stack-overflow.tsx";
+
+import Spotify from "@components/about/spotify.tsx";
 import { GET as GET_SPOTIFY } from "./api/spotify.ts";
+
+import StackOverflow from "@components/about/stack-overflow.tsx";
 import { GET as GET_STACK_OVERFLOW } from "./api/stackoverflow";
+
 import { pageBounds } from "@styles/page";
 
 const SHOPIFY_CHECKOUT_URL =

src/pages/api/spotify.ts

@@ -14,11 +14,11 @@ export const TrackSchema = z.object({
 
 export type Track = z.infer<typeof TrackSchema>;
 
-const TokenSchema = z.object({
+export const TokenSchema = z.object({
   access_token: z.z.string(),
 });
 
-const RecentlyPlayedSchema = z.object({
+export const RecentlyPlayedSchema = z.object({
   items: z.array(z.object({ track: TrackSchema })),
 });
 

src/pages/api/stackoverflow.ts

@@ -22,12 +22,12 @@ const GET: APIRoute & {
     return new Response(null, { status: stackOverflowResponse.status });
   }
 
-  const result = StackOverflow.safeParse(stackOverflowResponse);
+  const result = StackOverflow.safeParse(await stackOverflowResponse.json());
+
   if (!result.success) {
     console.error("[GET] stackoverflow data changed: ", result.error);
     return new Response(null, { status: 400 });
   }
-
   return new Response(JSON.stringify(result.data));
 };
 

src/plugins/msw.ts

@@ -0,0 +1,24 @@
+function createHooks() {
+  if (process.env.NODE_ENV !== "development") {
+    return {};
+  }
+
+  const node = import("../mocks/node");
+
+  return {
+    "astro:server:setup": async () => {
+      const { server } = await node;
+      server.listen();
+    },
+    "astro:server:done": async () => {
+      const { server } = await node;
+      server.close();
+    },
+  };
+}
+export function msw() {
+  return {
+    name: "msw",
+    hooks: createHooks(),
+  };
+}