Fix query invalidation when ItemsContainer unmounts

src/RootApp.tsx

@@ -2,6 +2,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import React from 'react';
 
+import QueryClientEventHandler from 'components/QueryClientEventHandler';
 import { ApiProvider } from 'hooks/useApi';
 import { UserSettingsProvider } from 'hooks/useUserSettings';
 import { WebConfigProvider } from 'hooks/useWebConfig';
@@ -24,6 +25,7 @@ const RootApp = () => (
         <ApiProvider>
             <UserSettingsProvider>
                 <WebConfigProvider>
+                    <QueryClientEventHandler />
                     <RootAppRouter />
                 </WebConfigProvider>
             </UserSettingsProvider>

src/components/QueryClientEventHandler.tsx

@@ -0,0 +1,30 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, type FC } from 'react';
+
+import { EventType } from 'constants/eventType';
+import { useApi } from 'hooks/useApi';
+import Events from 'utils/events';
+
+/** Component that handles mapping events to query client actions. */
+const QueryClientEventHandler: FC = () => {
+    const queryClient = useQueryClient();
+    const { user } = useApi();
+
+    const invalidateItemQueries = useCallback(() => (
+        queryClient.invalidateQueries({
+            queryKey: ['User', user?.Id, 'Items']
+        })
+    ), [queryClient, user?.Id]);
+
+    useEffect(() => {
+        Events.on(document, EventType.REFRESH_NEEDED, invalidateItemQueries);
+
+        return () => {
+            Events.off(document, EventType.REFRESH_NEEDED, invalidateItemQueries);
+        };
+    }, [invalidateItemQueries]);
+
+    return null;
+};
+
+export default QueryClientEventHandler;

src/elements/emby-itemscontainer/ItemsContainer.tsx

@@ -7,7 +7,6 @@ import Box from '@mui/material/Box';
 import Sortable from 'sortablejs';
 import { type QueryKey, useQueryClient } from '@tanstack/react-query';
 
-import { EventType } from 'constants/eventType';
 import { useApi } from 'hooks/useApi';
 import { usePlaylistsMoveItemMutation } from 'hooks/useFetchItems';
 import Events, { type Event } from 'utils/events';
@@ -177,11 +176,7 @@ const ItemsContainer: FC<PropsWithChildren<ItemsContainerProps>> = ({
     }, []);
 
     const invalidateQueries = useCallback(() => (
-        queryClient.invalidateQueries({
-            queryKey,
-            type: 'all',
-            refetchType: 'active'
-        })
+        queryClient.invalidateQueries({ queryKey })
     ), [queryClient, queryKey]);
 
     const notifyRefreshNeeded = useCallback(
@@ -359,7 +354,6 @@ const ItemsContainer: FC<PropsWithChildren<ItemsContainerProps>> = ({
         };
 
         Events.on(playbackManager, 'playbackstop', onPlaybackStopped);
-        Events.on(document, EventType.REFRESH_NEEDED, invalidateQueries);
 
         return () => {
             if (timerRef.current) {
@@ -378,7 +372,6 @@ const ItemsContainer: FC<PropsWithChildren<ItemsContainerProps>> = ({
             unSubAll();
 
             Events.off(playbackManager, 'playbackstop', onPlaybackStopped);
-            Events.off(document, EventType.REFRESH_NEEDED, invalidateQueries);
         };
     }, [
         api,