💽 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
This commit is contained in:
Danny Avila 2024-04-05 17:08:37 -04:00 committed by GitHub
parent fb80af05be
commit f6a84887e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 76 additions and 94 deletions

View file

@ -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;