feat(ui): api layer refactor

*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`*

`openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update.
`openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences:

- provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks
- fetch client is created at runtime and has a very nice typescript DX
- generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit.
- removed npm api generation scripts - now we have a single `typegen` script

overall i have more confidence in this new library.

*use nanostores for api base and token*

very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy.

*organise rtk-query api*

split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!

Author: psychedelicious

invokeai/frontend/web/package.json

@@ -23,8 +23,7 @@
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
     "dev:host": "concurrently \"vite dev --host\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
-    "api:web": "openapi -i http://localhost:9090/openapi.json -o src/services/api --client axios --useOptions --useUnionTypes --indent 2 --request src/services/fixtures/request.ts",
-    "api:file": "openapi -i src/services/fixtures/openapi.json -o src/services/api --client axios --useOptions --useUnionTypes --indent 2 --request src/services/fixtures/request.ts",
+    "typegen": "npx openapi-typescript http://localhost:9090/openapi.json --output src/services/schema.d.ts -t",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
@@ -81,6 +80,8 @@
     "i18next-http-backend": "^2.2.0",
     "konva": "^9.0.1",
     "lodash-es": "^4.17.21",
+    "nanostores": "^0.9.2",
+    "openapi-fetch": "^0.4.0",
     "overlayscrollbars": "^2.1.1",
     "overlayscrollbars-react": "^0.5.0",
     "patch-package": "^7.0.0",
@@ -140,6 +141,7 @@
     "lint-staged": "^13.2.2",
     "madge": "^6.0.0",
     "openapi-types": "^12.1.0",
+    "openapi-typescript": "^6.2.8",
     "openapi-typescript-codegen": "^0.24.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",

invokeai/frontend/web/src/app/components/App.tsx

@@ -24,7 +24,7 @@ import Toaster from './Toaster';
 import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
-import { useListModelsQuery } from 'services/apiSlice';
+import { useListModelsQuery } from 'services/api/endpoints/models';
 
 const DEFAULT_CONFIG = {};
 

invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx

@@ -11,8 +11,8 @@ import {
 } from '@dnd-kit/core';
 import { PropsWithChildren, memo, useCallback, useState } from 'react';
 import OverlayDragImage from './OverlayDragImage';
-import { ImageDTO } from 'services/api';
-import { isImageDTO } from 'services/types/guards';
+import { ImageDTO } from 'services/api/types';
+import { isImageDTO } from 'services/api/guards';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
 import { AnimatePresence, motion } from 'framer-motion';
 

invokeai/frontend/web/src/app/components/ImageDnd/OverlayDragImage.tsx

@@ -1,6 +1,6 @@
 import { Box, Image } from '@chakra-ui/react';
 import { memo } from 'react';
-import { ImageDTO } from 'services/api';
+import { ImageDTO } from 'services/api/types';
 
 type OverlayDragImageProps = {
   image: ImageDTO;

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
-import { OpenAPI } from 'services/api';
+// import { OpenAPI } from 'services/api/types';
 
 import Loading from '../../common/components/Loading/Loading';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@@ -23,6 +23,7 @@ import {
 } from 'app/contexts/DeleteImageContext';
 import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
 import { AddImageToBoardContextProvider } from '../contexts/AddImageToBoardContext';
+import { $authToken, $baseUrl } from 'services/api/client';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -47,12 +48,12 @@ const InvokeAIUI = ({
   useEffect(() => {
     // configure API client token
     if (token) {
-      OpenAPI.TOKEN = token;
+      $authToken.set(token);
     }
 
     // configure API client base url
     if (apiUrl) {
-      OpenAPI.BASE = apiUrl;
+      $baseUrl.set(apiUrl);
     }
 
     // reset dynamically added middlewares
@@ -69,6 +70,12 @@ const InvokeAIUI = ({
     } else {
       addMiddleware(socketMiddleware());
     }
+
+    return () => {
+      // Reset the API client token and base url on unmount
+      $baseUrl.set(undefined);
+      $authToken.set(undefined);
+    };
   }, [apiUrl, token, middleware]);
 
   return (

invokeai/frontend/web/src/app/contexts/AddImageToBoardContext.tsx

@@ -1,7 +1,7 @@
 import { useDisclosure } from '@chakra-ui/react';
 import { PropsWithChildren, createContext, useCallback, useState } from 'react';
-import { ImageDTO } from 'services/api';
-import { useAddImageToBoardMutation } from 'services/apiSlice';
+import { ImageDTO } from 'services/api/types';
+import { useAddImageToBoardMutation } from 'services/api/endpoints/boardImages';
 
 export type ImageUsage = {
   isInitialImage: boolean;

invokeai/frontend/web/src/app/contexts/DeleteImageContext.tsx

@@ -11,7 +11,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { ImageDTO } from 'services/api';
+import { ImageDTO } from 'services/api/types';
 import { RootState } from 'app/store/store';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { controlNetSelector } from 'features/controlNet/store/controlNetSlice';

invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts

@@ -1,7 +1,7 @@
 import { AnyAction } from '@reduxjs/toolkit';
 import { isAnyGraphBuilt } from 'features/nodes/store/actions';
 import { forEach } from 'lodash-es';
-import { Graph } from 'services/api';
+import { Graph } from 'services/api/types';
 
 export const actionSanitizer = <A extends AnyAction>(action: A): A => {
   if (isAnyGraphBuilt(action)) {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

@@ -1,7 +1,7 @@
 import { startAppListening } from '..';
 import { log } from 'app/logging/useLogger';
 import { commitStagingAreaImage } from 'features/canvas/store/canvasSlice';
-import { sessionCanceled } from 'services/thunks/session';
+import { sessionCanceled } from 'services/api/thunks/session';
 
 const moduleLog = log.child({ namespace: 'canvas' });
 
@@ -10,7 +10,7 @@ export const addCommitStagingAreaImageListener = () => {
     actionCreator: commitStagingAreaImage,
     effect: async (action, { dispatch, getState }) => {
       const state = getState();
-      const { sessionId, isProcessing } = state.system;
+      const { sessionId: session_id, isProcessing } = state.system;
       const canvasSessionId = action.payload;
 
       if (!isProcessing) {
@@ -23,20 +23,20 @@ export const addCommitStagingAreaImageListener = () => {
         return;
       }
 
-      if (canvasSessionId !== sessionId) {
+      if (canvasSessionId !== session_id) {
         moduleLog.debug(
           {
             data: {
               canvasSessionId,
-              sessionId,
+              session_id,
             },
           },
           'Canvas session does not match global session, skipping cancel'
         );
         return;
       }
 
-      dispatch(sessionCanceled({ sessionId }));
+      dispatch(sessionCanceled({ session_id }));
     },
   });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts

@@ -2,24 +2,27 @@ import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
 import { boardIdSelected } from 'features/gallery/store/boardSlice';
 import { selectImagesAll } from 'features/gallery/store/imagesSlice';
-import { IMAGES_PER_PAGE, receivedPageOfImages } from 'services/thunks/image';
-import { api } from 'services/apiSlice';
+import {
+  IMAGES_PER_PAGE,
+  receivedPageOfImages,
+} from 'services/api/thunks/image';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { boardsApi } from 'services/api/endpoints/boards';
 
 const moduleLog = log.child({ namespace: 'boards' });
 
 export const addBoardIdSelectedListener = () => {
   startAppListening({
     actionCreator: boardIdSelected,
     effect: (action, { getState, dispatch }) => {
-      const boardId = action.payload;
+      const board_id = action.payload;
 
       // we need to check if we need to fetch more images
 
       const state = getState();
       const allImages = selectImagesAll(state);
 
-      if (!boardId) {
+      if (!board_id) {
         // a board was unselected
         dispatch(imageSelected(allImages[0]?.image_name));
         return;
@@ -29,13 +32,14 @@ export const addBoardIdSelectedListener = () => {
 
       const filteredImages = allImages.filter((i) => {
         const isInCategory = categories.includes(i.image_category);
-        const isInSelectedBoard = boardId ? i.board_id === boardId : true;
+        const isInSelectedBoard = board_id ? i.board_id === board_id : true;
         return isInCategory && isInSelectedBoard;
       });
 
       // get the board from the cache
-      const { data: boards } = api.endpoints.listAllBoards.select()(state);
-      const board = boards?.find((b) => b.board_id === boardId);
+      const { data: boards } =
+        boardsApi.endpoints.listAllBoards.select()(state);
+      const board = boards?.find((b) => b.board_id === board_id);
 
       if (!board) {
         // can't find the board in cache...
@@ -50,7 +54,7 @@ export const addBoardIdSelectedListener = () => {
         filteredImages.length < board.image_count &&
         filteredImages.length < IMAGES_PER_PAGE
       ) {
-        dispatch(receivedPageOfImages({ categories, boardId }));
+        dispatch(receivedPageOfImages({ categories, board_id }));
       }
     },
   });
@@ -60,13 +64,13 @@ export const addBoardIdSelected_changeSelectedImage_listener = () => {
   startAppListening({
     actionCreator: boardIdSelected,
     effect: (action, { getState, dispatch }) => {
-      const boardId = action.payload;
+      const board_id = action.payload;
 
       const state = getState();
 
       // we need to check if we need to fetch more images
 
-      if (!boardId) {
+      if (!board_id) {
         // a board was unselected - we don't need to do anything
         return;
       }
@@ -75,13 +79,14 @@ export const addBoardIdSelected_changeSelectedImage_listener = () => {
 
       const filteredImages = selectImagesAll(state).filter((i) => {
         const isInCategory = categories.includes(i.image_category);
-        const isInSelectedBoard = boardId ? i.board_id === boardId : true;
+        const isInSelectedBoard = board_id ? i.board_id === board_id : true;
         return isInCategory && isInSelectedBoard;
       });
 
       // get the board from the cache
-      const { data: boards } = api.endpoints.listAllBoards.select()(state);
-      const board = boards?.find((b) => b.board_id === boardId);
+      const { data: boards } =
+        boardsApi.endpoints.listAllBoards.select()(state);
+      const board = boards?.find((b) => b.board_id === board_id);
       if (!board) {
         // can't find the board in cache...
         return;
@@ -92,7 +97,7 @@ export const addBoardIdSelected_changeSelectedImage_listener = () => {
         filteredImages.length < board.image_count &&
         filteredImages.length < IMAGES_PER_PAGE
       ) {
-        dispatch(receivedPageOfImages({ categories, boardId }));
+        dispatch(receivedPageOfImages({ categories, board_id }));
       }
     },
   });

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts

@@ -2,7 +2,7 @@ import { canvasMerged } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
 import { log } from 'app/logging/useLogger';
 import { addToast } from 'features/system/store/systemSlice';
-import { imageUploaded } from 'services/thunks/image';
+import { imageUploaded } from 'services/api/thunks/image';
 import { setMergedCanvas } from 'features/canvas/store/canvasSlice';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { getFullBaseLayerBlob } from 'features/canvas/util/getFullBaseLayerBlob';
@@ -47,13 +47,11 @@ export const addCanvasMergedListener = () => {
 
       const imageUploadedRequest = dispatch(
         imageUploaded({
-          formData: {
-            file: new File([blob], 'mergedCanvas.png', {
-              type: 'image/png',
-            }),
-          },
-          imageCategory: 'general',
-          isIntermediate: true,
+          file: new File([blob], 'mergedCanvas.png', {
+            type: 'image/png',
+          }),
+          image_category: 'general',
+          is_intermediate: true,
           postUploadAction: {
             type: 'TOAST_CANVAS_MERGED',
           },
@@ -68,13 +66,13 @@ export const addCanvasMergedListener = () => {
           uploadedImageAction.meta.requestId === imageUploadedRequest.requestId
       );
 
-      const mergedCanvasImage = payload;
+      const { image_name } = payload;
 
       dispatch(
         setMergedCanvas({
           kind: 'image',
           layer: 'base',
-          image: mergedCanvasImage,
+          imageName: image_name,
           ...baseLayerRect,
         })
       );

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts

@@ -1,7 +1,7 @@
 import { canvasSavedToGallery } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
 import { log } from 'app/logging/useLogger';
-import { imageUploaded } from 'services/thunks/image';
+import { imageUploaded } from 'services/api/thunks/image';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
 import { imageUpserted } from 'features/gallery/store/imagesSlice';
@@ -30,13 +30,11 @@ export const addCanvasSavedToGalleryListener = () => {
 
       const imageUploadedRequest = dispatch(
         imageUploaded({
-          formData: {
-            file: new File([blob], 'savedCanvas.png', {
-              type: 'image/png',
-            }),
-          },
-          imageCategory: 'general',
-          isIntermediate: false,
+          file: new File([blob], 'savedCanvas.png', {
+            type: 'image/png',
+          }),
+          image_category: 'general',
+          is_intermediate: false,
           postUploadAction: {
             type: 'TOAST_CANVAS_SAVED_TO_GALLERY',
           },

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts

@@ -1,14 +1,13 @@
 import { startAppListening } from '..';
-import { imageMetadataReceived } from 'services/thunks/image';
+import { imageMetadataReceived } from 'services/api/thunks/image';
 import { log } from 'app/logging/useLogger';
 import { controlNetImageProcessed } from 'features/controlNet/store/actions';
-import { Graph } from 'services/api';
-import { sessionCreated } from 'services/thunks/session';
+import { Graph } from 'services/api/types';
+import { sessionCreated } from 'services/api/thunks/session';
 import { sessionReadyToInvoke } from 'features/system/store/actions';
 import { socketInvocationComplete } from 'services/events/actions';
-import { isImageOutput } from 'services/types/guards';
+import { isImageOutput } from 'services/api/guards';
 import { controlNetProcessedImageChanged } from 'features/controlNet/store/controlNetSlice';
-import { pick } from 'lodash-es';
 
 const moduleLog = log.child({ namespace: 'controlNet' });
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard.ts

@@ -1,13 +1,13 @@
 import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
-import { imageMetadataReceived } from 'services/thunks/image';
-import { api } from 'services/apiSlice';
+import { imageMetadataReceived } from 'services/api/thunks/image';
+import { boardImagesApi } from 'services/api/endpoints/boardImages';
 
 const moduleLog = log.child({ namespace: 'boards' });
 
 export const addImageAddedToBoardFulfilledListener = () => {
   startAppListening({
-    matcher: api.endpoints.addImageToBoard.matchFulfilled,
+    matcher: boardImagesApi.endpoints.addImageToBoard.matchFulfilled,
     effect: (action, { getState, dispatch }) => {
       const { board_id, image_name } = action.meta.arg.originalArgs;
 
@@ -18,7 +18,7 @@ export const addImageAddedToBoardFulfilledListener = () => {
 
       dispatch(
         imageMetadataReceived({
-          imageName: image_name,
+          image_name,
         })
       );
     },
@@ -27,7 +27,7 @@ export const addImageAddedToBoardFulfilledListener = () => {
 
 export const addImageAddedToBoardRejectedListener = () => {
   startAppListening({
-    matcher: api.endpoints.addImageToBoard.matchRejected,
+    matcher: boardImagesApi.endpoints.addImageToBoard.matchRejected,
     effect: (action, { getState, dispatch }) => {
       const { board_id, image_name } = action.meta.arg.originalArgs;