T
TanStack•16mo ago
like-gold

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
        }
    }
});
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.
2 Replies
equal-aqua
equal-aqua•16mo ago
Show reproduction. It should work. But better wrap the select in useCallback as the docs state
like-gold
like-goldOP•16mo ago
OK, now it works fine. I swear I didn't change anything. Thanks for the help!

Did you find this page helpful?