Usage with react-query / trpc

[ZionLG]

currently, I dont think its possible to use search with react-query / trpc with how the useSearch option works. would appreciate if you can make an example with it, thanks!

[fitimbytyqi]

@hsuanyi-chou +1

I believe onSearch should not handle the fetching logic but rather just pass the debounced search value and leave the developer to handle it himself.

In React Query's case, onSearch should only be used to set a state in the parent level which changes the queryKey and therefore, fresh data is passed into the multiselect.

[hsuanyi-chou]

There's a onSearch prop. I think you can change the queryKey here.

[fitimbytyqi]

onSearch expects a promise as return type.

I might be wrong though but an example with tanstack query would be nice to showcase its usage.

[hsuanyi-chou]

Sorry, my bad. I forgot that I need to update the options.

Maybe lazy query can do the trick.

In my project the multiple selector which is working with apollo client, I use the lazy query to search the value.

[fitimbytyqi]

I mean, I can set a state when onSearch executes on this implementation but its expecting me to return a promise and I only want to do something to the parent.

[hsuanyi-chou]

Let me clarify it: You expect to do something when input value changed?

If it does, there's a inputProps prop. You can use onChange to do something.

demo

[fitimbytyqi]

@hsuanyi-chou I tried to add an implementation with trpc, even though im passing the options correctly, I get an empty indicator in the options.

[hsuanyi-chou]

I tried this in the async search demo. It shows options correctly.🤔

Sorry for the late response. I was on vacation last week.