Filtering with UseSelect Hooks
There are 2 tables:
1. Parent (Category)
2. Children (Customer)
By Cases:
1. When Customer table is filtered by Category
And there is a Customer that matches the Category (works as expected)
2. When Customer table is filtered by Category
And there is no Customer data that matches the Category (an error occurred, incorrect payload happen)
Payload
{{API_URL}}/categories?filter[0]=id||$inExpected Payload
{{API_URL}}/categories?filter[0]=id$in{{category_id}}Repo: https://github.com/Us3r-gitHub/Refine-Nest
GitHub
GitHub - Us3r-gitHub/Refine-Nest
Contribute to Us3r-gitHub/Refine-Nest development by creating an account on GitHub.
![No description](https://cdn.answeroverflow.com/1084444228001747004/UseSelect_-_Error.png)
11 Replies
Hey @Us3r! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
It looks like you're trying to filter the Customer table by Category. To do this, you'll need to use the
useSelect
hook from Refine. This hook allows you to fetch data from a REST API and pass it to the <Select>
component.
Here's an example of how to use the useSelect
hook:
By default, Refine does the search using the useList
hook and passes it to the search parameter. If you want to change this behavior to make client-side filtering, you can examine this example (https://ant.design/components/select/#components-select-demo-search-sort).
To fix the incorrect payload issue, you'll need to make sure that the useSelect
hook is passing the correct parameters to the API. In this case, you'll need to make sure that the filter[0]
parameter is set to id||$in||{{category_id}}
.
For more information, you can refer to the useSelect hook documentation (https://refine.dev/docs/api-reference/core/hooks/useSelect).
----------------------<@612139467452448784> kapa.ai is still learning and improving, please let us how it did by reacting below
stormy-gold•2y ago
@Us3r you can update tags like this
stormy-gold•2y ago
Thank you for clear and detailed explanation. i will debug
Hi @Us3r again, can you give us your server API for debug?
manual-pink•2y ago
https://github.com/Us3r-gitHub/Refine-Nest/tree/nest_server
With an extra step to setup DB
1. Create a DB
2. Inject data (insert action using Swagger, accessed at http://localhost:3030/docs)
- Create 2 categories
- Create 1 customer associated with one of the categories
GitHub
GitHub - Us3r-gitHub/Refine-Nest at nest_server
Contribute to Us3r-gitHub/Refine-Nest development by creating an account on GitHub.
stormy-gold•2y ago
I understand. thank you again for clear explanation. i will debug when i find a chance.
I compare your code with our example. couldn't find a problem in first look. i want to debug more when i found time.
We plan to launch refine@4 this week. So I may not be able to respond quickly. I am sorry about that. But i will try
manual-pink•2y ago
Ok, no problem
I just want to know why the Data Values are not set in the useSelect Hooks
When no related children matches
Thank you for your help and concern
Wow refine@4 🔥
Sounds good, can't wait and try
stormy-gold•2y ago
this our RFC.
https://github.com/refinedev/refine/discussions/3527
We would be happy for all feedbacks. 🙏
@Us3r Hi again, sorry for late response. finally I found time to debug.
in
src/pages/customer/list.tsx
this code will fix
you are sending []
with useMany
and nextjs-crud gives error. maybe wee need to fix this in refine-nestjsx-crud
. i will discus with core team.
anyway, queryOptions: { enabled: !!categoryIds.length }
this will workmanual-pink•2y ago
It's work, thank you for your support
You're best
At this point, the issue is not useSelect but useMany hooks right?
stormy-gold•2y ago
yes