Fix Storybook Service Worker in GitHub Pages (#31)

.storybook/preview.ts

@@ -2,9 +2,6 @@ import type { Preview } from "@storybook/react";
 import { initialize, mswLoader, getWorker } from "msw-storybook-addon";
 import "./stories/input.css";
 
-// Initialize MSW
-initialize();
-
 const preview: Preview = {
   // calling getWorker().start() is a workaround for an issue
   // where Storybook doesn't wait for MSW before running:
@@ -20,4 +17,16 @@ const preview: Preview = {
   },
 };
 
+let options = {};
+if (location.hostname === "apollographql.github.io") {
+  options = {
+    serviceWorker: {
+      url: "/graphql-testing-library/mockServiceWorker.js",
+    },
+  };
+}
+
+// Initialize MSW
+initialize(options);
+
 export default preview;

.storybook/stories/Welcome.mdx

@@ -62,8 +62,8 @@ const schemaWithMocks = addMocksToSchema({
   },
 });
 
-// `createHandler` returns an object with `handler` and `replaceSchema`
-// functions: `handler` is a MSW handler that will intercept all GraphQL
+// `createHandler` returns an object with a `handler` and `replaceSchema`
+// function: `handler` is a MSW handler that will intercept all GraphQL
 // operations, and `replaceSchema` allows you to replace the mock schema
 // the `handler` use to resolve requests against.
 const { handler, replaceSchema } = createHandler(schemaWithMocks, {

README.md

@@ -58,8 +58,8 @@ const schemaWithMocks = addMocksToSchema({
   },
 });
 
-// `createHandler` returns an object with `handler` and `replaceSchema`
-// functions: `handler` is a MSW handler that will intercept all GraphQL
+// `createHandler` returns an object with a `handler` and `replaceSchema`
+// function: `handler` is a MSW handler that will intercept all GraphQL
 // operations, and `replaceSchema` allows you to replace the mock schema
 // the `handler` use to resolve requests against.
 const { handler, replaceSchema } = createHandler(schemaWithMocks, {

package.json

@@ -34,6 +34,7 @@
   "scripts": {
     "build": "tsup",
     "clean": "rm -rf dist",
+    "clean-storybook": "rm -rf storybook-static",
     "prepdist:changesets": "node scripts/prepareDist.cjs",
     "changeset-publish": "pnpm run clean && pnpm run build && pnpm run prepdist:changesets && cd dist && changeset publish",
     "changeset-version": "changeset version && pnpm i",
@@ -46,7 +47,7 @@
     "test-storybook": "test-storybook",
     "build-and-test-storybook": "pnpm run build-storybook && npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:6006 && pnpm run test-storybook\"",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "pnpm run clean-storybook && storybook build"
   },
   "license": "MIT",
   "devDependencies": {