T
TanStack•4w ago
rare-sapphire

Preserving search results with useInfiniteQuery

I have an infinite endpoint which is hooked up to a form, the user can search for and select user “Steve” who is not on page 1 (without search). The onSearch clears in my select component, and this makes the react query trigger with an empty search value, it refetches page 1, and then removes the “Steve” option. How can I preserve that option? It works fine for normal scrolling, but not with search. 
const useInfiniteEmployees = (
    search = '',
    sorting: SortingState = [{id: 'name', desc: false}],
) => {
    const fetchEmployees = async ({pageParam = 1}) => {
        const response = await employeesApi.getEmployees(
            pageParam,
            search,
            parseSort(sorting),
        );
        return toPaginatedEmployees(response).employees;
    };

    return useInfiniteQuery({
        queryKey: employeesQueryKeys.infinite(search, sorting),
        queryFn: fetchEmployees,
        initialPageParam: 1,
        getNextPageParam: lastPage =>
            lastPage.has_next ? lastPage.next_num : undefined,
        placeholderData: keepPreviousData,
    });
};

export default useInfiniteEmployees;
const useInfiniteEmployees = (
    search = '',
    sorting: SortingState = [{id: 'name', desc: false}],
) => {
    const fetchEmployees = async ({pageParam = 1}) => {
        const response = await employeesApi.getEmployees(
            pageParam,
            search,
            parseSort(sorting),
        );
        return toPaginatedEmployees(response).employees;
    };

    return useInfiniteQuery({
        queryKey: employeesQueryKeys.infinite(search, sorting),
        queryFn: fetchEmployees,
        initialPageParam: 1,
        getNextPageParam: lastPage =>
            lastPage.has_next ? lastPage.next_num : undefined,
        placeholderData: keepPreviousData,
    });
};

export default useInfiniteEmployees;
And my options passed to my form: 
    const {data: employees, fetchNextPage: fetchEmployeesNextPage} =
        useFetchInfiniteEmployees(employeeSearch);
    const serverEmployees = employees?.pages?.flatMap(page => page.items) || [];
    const {data: employees, fetchNextPage: fetchEmployeesNextPage} =
        useFetchInfiniteEmployees(employeeSearch);
    const serverEmployees = employees?.pages?.flatMap(page => page.items) || [];
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?