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||$in
Expected 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
11 Replies
kapa.ai
kapa.ai2y ago
Hey @Us3r! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai2y ago
---------------------- 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:
import { useSelect, Select } from "@pankod/refine-antd";

interface ICategory {
id: number;
title: string;
}

const PostCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
});

return (
<Select
placeholder="Select a category" style={{ width: 300 }}
{...selectProps}
/>
);
};
import { useSelect, Select } from "@pankod/refine-antd";

interface ICategory {
id: number;
title: string;
}

const PostCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
});

return (
<Select
placeholder="Select a category" style={{ width: 300 }}
{...selectProps}
/>
);
};
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). ----------------------
kapa.ai
kapa.ai2y ago
<@612139467452448784> kapa.ai is still learning and improving, please let us how it did by reacting below
stormy-gold
stormy-gold2y ago
@Us3r you can update tags like this
stormy-gold
stormy-gold2y ago
Thank you for clear and detailed explanation. i will debug Hi @Us3r again, can you give us your server API for debug?
optimistic-gold
optimistic-gold2y 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
stormy-gold2y 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
optimistic-gold
optimistic-gold2y 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
stormy-gold17mo 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
const categoryIds = tableProps?.dataSource?.map((item) => item?.category.id) ?? []
const { data: categoryData, isLoading: categoryIsLoading } = useMany({
resource: 'categories',
ids: categoryIds,
queryOptions: { enabled: !!categoryIds.length },
})
const categoryIds = tableProps?.dataSource?.map((item) => item?.category.id) ?? []
const { data: categoryData, isLoading: categoryIsLoading } = useMany({
resource: 'categories',
ids: categoryIds,
queryOptions: { enabled: !!categoryIds.length },
})
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 work
optimistic-gold
optimistic-gold17mo 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
stormy-gold17mo ago
yes