Unnecessary multiple remote calls

[modyabhi]

For my use case I am fetching data from an external source. If the user has partially filled in the input it renders the list. Upon full completion, that item is already present in my data and forces another call to the API with loading state.

This could be avoided if there was a way to access the filtered data store and check if after filtering and sorting it's not empty and not trigger another API call.

[elwin212]

have you try the useCommandState hook?

const filtered = useCommandState((state) => {
    return state.filtered
  })

it will return:

(property) filtered: {
    count: number;
    items: Map<string, number>;
    groups: Set<string>;
}

not sure if this is what you want

[modyabhi]

have you try the useCommandState hook?

const filtered = useCommandState((state) => {
    return state.filtered
  })

it will return:

(property) filtered: {
    count: number;
    items: Map<string, number>;
    groups: Set<string>;
}

not sure if this is what you want

Thanks for the above code, that seems to work to get the filtered items. Seems like there's more to it. Whenever there is a whitespace like space. The internal search function seems to return 0 filtered items and then return the list again.

Here's what I've implemented. Still triggering my api

 const search = useCommandState((state) => state.filtered.count);

    const enabled = !!debouncedSearchQuery && debouncedSearchQuery.length > 3 && search == 0;

    console.log(search, enabled)

    const {
        data,
        isLoading: isLoadingOrig,
        isError,
    } = useQuery({
        queryKey: ["search", debouncedSearchQuery],
        queryFn: () => searchResults(debouncedSearchQuery),
        enabled,
    });

Console log, it becomes 0 when I type a space in the search functionality.

There might be some form of delay on the search function.

A screenshot with the search value

[McTom234]

Hey @modyabhi, I am using the component with react-query and everything works fine for me.

I noticed one thing in the code you provided: why do you need to get the data from the api when one changes the serach term? The component has a pretty good filter/search algorithm implemented.

[modyabhi]

Hey @modyabhi, I am using the component with react-query and everything works fine for me.

I noticed one thing in the code you provided: why do you need to get the data from the api when one changes the serach term? The component has a pretty good filter/search algorithm implemented.

I have over 20,000 items in the list and I'm limiting 10 results per call.

[McTom234]

What do you type in exactly and when does what gets triggered? e.g. a - [ trigger ] I would like to try to reproduce it...

[pacocoursey]

It sounds like this is an issue with your data fetching code, not the cmdk library. Closing for now.