Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage with react-query / trpc #24

Open
ZionLG opened this issue Jan 22, 2024 · 8 comments
Open

Usage with react-query / trpc #24

ZionLG opened this issue Jan 22, 2024 · 8 comments

Comments

@ZionLG
Copy link

ZionLG commented Jan 22, 2024

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
Copy link

fitimbytyqi commented Jun 27, 2024

@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
Copy link
Owner

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

@fitimbytyqi
Copy link

fitimbytyqi commented Jun 27, 2024

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
Copy link
Owner

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
Copy link

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
Copy link
Owner

hsuanyi-chou commented Jun 28, 2024

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
Copy link

@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.

Screenshot 2024-06-28 at 11 29 01
Screenshot 2024-06-28 at 11 30 25

@hsuanyi-chou
Copy link
Owner

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

image

image

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants