TanStackT
TanStack2y ago
2 replies
moderate-tomato

Select portion of useQuery only runs on first page load

I am building a table of Quotes where I get the quotes using useQuery andI have a filter up top. So what I have done is use the select property to build two state arrays, all and filtered. That looks like this:
const {
    data: priceLists,
    isLoading: gettingPriceLists,
    status: priceListsStatus
} = useQuery<PriceListType[] | undefined>({
    queryKey: ['priceLists'],
    select: (data: PriceListFromDBType[]) => {
        const nonArchived: PriceListType[] = data.filter(pl => !pl.archivedDate).map(pl => {
            return {
                ...pl,
                createdDate: getFormattedDate(new Date(pl.createdDate), false, true, true)
            }
        });
        const archived: PriceListType[] = data.filter(pl => !!pl.archivedDate).map(pl => {
            return {
                ...pl,
                createdDate: getFormattedDate(new Date(pl.createdDate), false, true, true)
            }
        });
        return {
            all: nonArchived,
            filtered: priceListFilter.length >= 3 ? nonArchived.filter(p => p.name.toLowerCase().includes(priceListFilter.toLowerCase())) : nonArchived,
            archived
        }
    }
});

And then the priceListFilter is just a simple state string tied to the input text box: const [priceListFilter, setPriceListFilter] = useState(''); But for some reason, as I type the filter, the filtered array is not updating.
Was this page helpful?