Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-25 20:04:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor: Optimize filter change handling and query invalidation in usePromptGroupsNav hook

Browse source
This commit is contained in:
Danny Avila 2025-08-11 22:41:26 -04:00
parent 6137a089b3
commit 1e9fb86ba8
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
1 changed files with 26 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

35
client/src/hooks/Prompts/usePromptGroupsNav.ts
View file

@ -1,10 +1,10 @@
import { useMemo, useRef, useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import { useMemo, useRef, useEffect, useCallback } from 'react';
import { usePromptGroupsInfiniteQuery } from '~/data-provider'; import { usePromptGroupsInfiniteQuery } from '~/data-provider';
import debounce from 'lodash/debounce';
import store from '~/store';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { QueryKeys } from 'librechat-data-provider'; import { QueryKeys } from 'librechat-data-provider';
import debounce from 'lodash/debounce';
import store from '~/store';
export default function usePromptGroupsNav() { export default function usePromptGroupsNav() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -14,6 +14,7 @@ export default function usePromptGroupsNav() {
const [pageNumber, setPageNumber] = useRecoilState(store.promptsPageNumber); const [pageNumber, setPageNumber] = useRecoilState(store.promptsPageNumber);
const maxPageNumberReached = useRef(1); const maxPageNumberReached = useRef(1);
const prevFiltersRef = useRef({ name, category, pageSize });
useEffect(() => { useEffect(() => {
if (pageNumber > 1 && pageNumber > maxPageNumberReached.current) { if (pageNumber > 1 && pageNumber > maxPageNumberReached.current) {
@ -29,10 +30,25 @@ export default function usePromptGroupsNav() {
}); });
useEffect(() => { useEffect(() => {
const filtersChanged =
prevFiltersRef.current.name !== name ||
prevFiltersRef.current.category !== category ||
prevFiltersRef.current.pageSize !== pageSize;
if (!filtersChanged) {
return;
}
maxPageNumberReached.current = 1; maxPageNumberReached.current = 1;
setPageNumber(1); setPageNumber(1);
queryClient.resetQueries([QueryKeys.promptGroups, name, category, pageSize]);
}, [pageSize, name, category, setPageNumber]); // Only reset queries if we're not already on page 1
// This prevents double queries when filters change
if (pageNumber !== 1) {
queryClient.invalidateQueries([QueryKeys.promptGroups, name, category, pageSize]);
}
prevFiltersRef.current = { name, category, pageSize };
}, [pageSize, name, category, setPageNumber, pageNumber, queryClient]);
const promptGroups = useMemo(() => { const promptGroups = useMemo(() => {
return groupsQuery.data?.pages[pageNumber - 1 + '']?.promptGroups || []; return groupsQuery.data?.pages[pageNumber - 1 + '']?.promptGroups || [];
@ -52,10 +68,11 @@ export default function usePromptGroupsNav() {
const hasNextPage = !!groupsQuery.hasNextPage || maxPageNumberReached.current > pageNumber; const hasNextPage = !!groupsQuery.hasNextPage || maxPageNumberReached.current > pageNumber;
const hasPreviousPage = !!groupsQuery.hasPreviousPage || pageNumber > 1; const hasPreviousPage = !!groupsQuery.hasPreviousPage || pageNumber > 1;
const debouncedSetName = useCallback( const debouncedSetName = useMemo(
debounce((nextValue: string) => { () =>
setName(nextValue); debounce((nextValue: string) => {
}, 850), setName(nextValue);
}, 850),
[setName], [setName],
); );