fix(ui): no duplicate network requests on app startup

Author: psychedelicious

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

@@ -4,6 +4,7 @@ import { api } from 'services/api';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { appSocketConnected, socketConnected } from 'services/events/actions';
 import { startAppListening } from '../..';
+import { isInitializedChanged } from 'features/system/store/systemSlice';
 
 export const addSocketConnectedEventListener = () => {
   startAppListening({
@@ -13,15 +14,20 @@ export const addSocketConnectedEventListener = () => {
 
       log.debug('Connected');
 
-      const { nodes, config } = getState();
+      const { nodes, config, system } = getState();
 
       const { disabledTabs } = config;
 
       if (!size(nodes.nodeTemplates) && !disabledTabs.includes('nodes')) {
         dispatch(receivedOpenAPISchema());
       }
 
-      dispatch(api.util.resetApiState());
+      if (system.isInitialized) {
+        // only reset the query caches if this connect event is a *reconnect* event
+        dispatch(api.util.resetApiState());
+      } else {
+        dispatch(isInitializedChanged(true));
+      }
 
       // pass along the socket event as an application action
       dispatch(appSocketConnected(action.payload));

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

@@ -1,5 +1,4 @@
 import { logger } from 'app/logging/logger';
-import { api } from 'services/api';
 import {
   appSocketDisconnected,
   socketDisconnected,
@@ -13,8 +12,6 @@ export const addSocketDisconnectedEventListener = () => {
       const log = logger('socketio');
       log.debug('Disconnected');
 
-      dispatch(api.util.resetApiState());
-
       // pass along the socket event as an application action
       dispatch(appSocketDisconnected(action.payload));
     },

invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts

@@ -1,6 +1,7 @@
 import { SystemState } from './types';
 
 export const systemPersistDenylist: (keyof SystemState)[] = [
+  'isInitialized',
   'isConnected',
   'denoiseProgress',
   'status',

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -24,6 +24,7 @@ import { SystemState, LANGUAGES } from './types';
 import { zPydanticValidationError } from './zodSchemas';
 
 export const initialSystemState: SystemState = {
+  isInitialized: false,
   isConnected: false,
   shouldConfirmOnDelete: true,
   enableImageDebugging: false,
@@ -82,6 +83,9 @@ export const systemSlice = createSlice({
     ) {
       state.shouldEnableInformationalPopovers = action.payload;
     },
+    isInitializedChanged(state, action: PayloadAction<boolean>) {
+      state.isInitialized = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -242,6 +246,7 @@ export const {
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
   setShouldEnableInformationalPopovers,
+  isInitializedChanged,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

invokeai/frontend/web/src/features/system/store/types.ts

@@ -21,6 +21,7 @@ export type DenoiseProgress = {
 };
 
 export interface SystemState {
+  isInitialized: boolean;
   isConnected: boolean;
   shouldConfirmOnDelete: boolean;
   enableImageDebugging: boolean;