Fix some bit rot that broke Storybook.

README.md

@@ -2,7 +2,7 @@
 
 *Simple blog app with a GraphQL backend and React frontend*
 
-BlogQL is a learning project; something I started to help enhance my knowlege of learn Node, TypeScript, React, GraphQL and GitHub Actions.
+BlogQL is a learning project; something I started to help enhance my knowledge of learn Node, TypeScript, React, GraphQL and GitHub Actions.
 Currently the system supports login via Google, single blog per user, a rich-text blog post editor and a GraphQL API accessible via API key.
 
 Here's a two-miniute video demo of the BlogQL UI as it stands today:

client/package.json

@@ -37,6 +37,7 @@
     "react-router-dom": "^6.6.2",
     "stack-utils": "^2.0.6",
     "string-strip-html": "^13.0.6",
+    "undici": "^6.19.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -81,11 +82,11 @@
     "faker": "^6.6.6",
     "graphql": "~15.8.0",
     "https-browserify": "^1.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
-    "msw": "^0.49.2",
+    "msw": "^1.3.3",
     "msw-storybook-addon": "^1.8.0",
     "storybook-addon-react-router-v6": "^0.3.4",
     "stream-http": "^3.2.0",

client/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.49.3).
+ * Mock Service Worker (1.3.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

client/src/blogs/BlogsList.tsx

@@ -34,12 +34,11 @@ export function BlogsList() {
             <Heading title='Welcome to BlogQL'
                      heading='This is where you can find a list of all the blogs in the system.' />
             <Table
-                rowKey='id'
+                rowKey={(record) => record.node.id} // Ensure each row has a unique key
                 loading={loading}
                 dataSource={dataSource}
                 columns={columns}
                 pagination={{
-                    total: data.blogs?.pageInfo.totalCount,
                     pageSize: pageSize,
                     onChange: e => {
                 }

client/src/mocks/browser.ts

@@ -3,9 +3,7 @@
  * Licensed under Apache Software License v2.
  */
 
-// src/mocks/browser.js
-import { setupWorker } from 'msw'
+import { setupWorker } from 'msw';
 import { handlers } from './handlers'
 
-// This configures a Service Worker with the given request handlers.
 export const worker = setupWorker(...handlers)

client/src/mocks/server.ts → client/src/mocks/node.ts

@@ -3,9 +3,7 @@
  * Licensed under Apache Software License v2.
  */
 
-// src/mocks/server.js
 import { setupServer } from 'msw/node'
 import { handlers } from './handlers'
 
-// This configures a request mocking server with the given request handlers.
 export const server = setupServer(...handlers)

client/src/setupTests.ts

@@ -1,6 +1,6 @@
 // src/setupTests.js
 import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client';
-import { server } from './mocks/server.js'
+import { server } from './mocks/node.js'
 import fetch from 'cross-fetch';
 
 export const client = new ApolloClient({