💽 refactor(client): Optimize ModelsConfig Query Cache (#2330)

* refactor(client): remove double caching of models via recoil to rely exclusively on react-query

* chore(useConversation): add modelsQuery.data dep to callback

client/src/routes/ChatRoute.tsx

@@ -1,4 +1,3 @@
-import { useRecoilValue } from 'recoil';
 import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import {
@@ -23,16 +22,18 @@ export default function ChatRoute() {
   const { data: startupConfig } = useGetStartupConfig();
 
   const { conversation } = store.useCreateConversationAtom(index);
-  const modelsQueryEnabled = useRecoilValue(store.modelsQueryEnabled);
   const { isAuthenticated } = useAuthRedirect();
   const { newConversation } = useNewConvo();
   const hasSetConversation = useRef(false);
 
-  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated && modelsQueryEnabled });
+  const modelsQuery = useGetModelsQuery({
+    enabled: isAuthenticated,
+    refetchOnMount: 'always',
+  });
   const initialConvoQuery = useGetConvoIdQuery(conversationId ?? '', {
     enabled: isAuthenticated && conversationId !== 'new',
   });
-  const endpointsQuery = useGetEndpointsQuery({ enabled: isAuthenticated && modelsQueryEnabled });
+  const endpointsQuery = useGetEndpointsQuery({ enabled: isAuthenticated });
   const { data: assistants = null } = useListAssistantsQuery(defaultOrderQuery, {
     select: (res) =>
       res.data.map(({ id, name, metadata, model }) => ({ id, name, metadata, model })),
@@ -50,6 +51,7 @@ export default function ChatRoute() {
       conversationId === 'new' &&
       endpointsQuery.data &&
       modelsQuery.data &&
+      !modelsQuery.data?.initial &&
       !hasSetConversation.current
     ) {
       newConversation({ modelsData: modelsQuery.data });
@@ -58,6 +60,7 @@ export default function ChatRoute() {
       initialConvoQuery.data &&
       endpointsQuery.data &&
       modelsQuery.data &&
+      !modelsQuery.data?.initial &&
       !hasSetConversation.current
     ) {
       newConversation({
@@ -68,10 +71,15 @@ export default function ChatRoute() {
         keepLatestMessage: true,
       });
       hasSetConversation.current = !!assistants;
-    } else if (!hasSetConversation.current && conversationId === 'new' && assistants) {
+    } else if (
+      !hasSetConversation.current &&
+      !modelsQuery.data?.initial &&
+      conversationId === 'new' &&
+      assistants
+    ) {
       newConversation({ modelsData: modelsQuery.data });
       hasSetConversation.current = true;
-    } else if (!hasSetConversation.current && assistants) {
+    } else if (!hasSetConversation.current && !modelsQuery.data?.initial && assistants) {
       newConversation({
         template: initialConvoQuery.data,
         preset: initialConvoQuery.data as TPreset,
@@ -80,8 +88,15 @@ export default function ChatRoute() {
       });
       hasSetConversation.current = true;
     }
+    /* Creates infinite render if all dependencies included */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialConvoQuery.data, modelsQuery.data, endpointsQuery.data, assistants]);
+  }, [
+    initialConvoQuery.data,
+    modelsQuery.data,
+    endpointsQuery.data,
+    assistants,
+    conversation?.model,
+  ]);
 
   if (endpointsQuery.isLoading || modelsQuery.isLoading) {
     return <Spinner className="m-auto text-black dark:text-white" />;

client/src/routes/Root.tsx

@@ -1,23 +1,14 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useGetModelsQuery, useGetSearchEnabledQuery } from 'librechat-data-provider/react-query';
+import { useGetSearchEnabledQuery } from 'librechat-data-provider/react-query';
 import type { ContextType } from '~/common';
-import {
-  useAuthContext,
-  useServerStream,
-  useConversation,
-  useAssistantsMap,
-  useFileMap,
-} from '~/hooks';
+import { useAuthContext, useServerStream, useAssistantsMap, useFileMap } from '~/hooks';
 import { AssistantsMapContext, FileMapContext } from '~/Providers';
 import { Nav, MobileNav } from '~/components/Nav';
 import store from '~/store';
 
 export default function Root() {
-  const location = useLocation();
-  const { newConversation } = useConversation();
   const { isAuthenticated } = useAuthContext();
   const [navVisible, setNavVisible] = useState(() => {
     const savedNavVisible = localStorage.getItem('navVisible');
@@ -27,26 +18,11 @@ export default function Root() {
   const submission = useRecoilValue(store.submission);
   useServerStream(submission ?? null);
 
-  const modelsQueryEnabled = useRecoilValue(store.modelsQueryEnabled);
   const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
-  const setModelsConfig = useSetRecoilState(store.modelsConfig);
 
   const fileMap = useFileMap({ isAuthenticated });
   const assistantsMap = useAssistantsMap({ isAuthenticated });
   const searchEnabledQuery = useGetSearchEnabledQuery({ enabled: isAuthenticated });
-  const modelsQuery = useGetModelsQuery({ enabled: isAuthenticated && modelsQueryEnabled });
-
-  useEffect(() => {
-    if (modelsQuery.data && location.state?.from?.pathname.includes('/chat')) {
-      setModelsConfig(modelsQuery.data);
-      // Note: passing modelsQuery.data prevents navigation
-      newConversation({}, undefined, modelsQuery.data);
-    } else if (modelsQuery.data) {
-      setModelsConfig(modelsQuery.data);
-    } else if (modelsQuery.isError) {
-      console.error('Failed to get models', modelsQuery.error);
-    }
-  }, [modelsQuery.data, modelsQuery.isError]);
 
   useEffect(() => {
     if (searchEnabledQuery.data) {
@@ -54,7 +30,12 @@ export default function Root() {
     } else if (searchEnabledQuery.isError) {
       console.error('Failed to get search enabled', searchEnabledQuery.error);
     }
-  }, [searchEnabledQuery.data, searchEnabledQuery.isError]);
+  }, [
+    searchEnabledQuery.data,
+    searchEnabledQuery.error,
+    searchEnabledQuery.isError,
+    setIsSearchEnabled,
+  ]);
 
   if (!isAuthenticated) {
     return null;