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
K
kapa.ai408d ago
Hey @Us3r! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
K
kapa.ai408d 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). ----------------------
K
kapa.ai408d ago
<@612139467452448784> kapa.ai is still learning and improving, please let us how it did by reacting below
F
fair-rose408d ago
@Us3r you can update tags like this
F
fair-rose408d ago
Thank you for clear and detailed explanation. i will debug Hi @Us3r again, can you give us your server API for debug?
N
national-gold408d 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.
F
fair-rose408d 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
N
national-gold408d 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
F
fair-rose405d 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
N
national-gold405d ago
It's work, thank you for your support You're best At this point, the issue is not useSelect but useMany hooks right?
F
fair-rose405d ago
yes
More Posts
Also Is there anyway I can change fromAlso, Is there anyway I can change from mui to antdesign?Hi There How can I remove i18n ProviderHi There, How can I remove i18n Provider from my app? By mistake I add it.And having another issue with RefineAnd having another issue with Refine using Antd Failed to run, is it incompatible with `Antd` packaDate PickerHi all I try to do a create event page which help me to create an event and add it to the database Iwhen i click on sign in with google it opens a popup window which is empty. #helpwhen i click on sign in with google it opens a popup window which is empty. How can i login to the sTutorial - Generate CRUD PagesHi, I'm going through the tutorial and got upto the Generate CRUD page but it's not working as I wouHOW TO SOLVE WHEN LOGIN SUCCESS BUT DON'T WANT TO MOVE TO NEXT ACTIVITYI'm creating a login activity but after successful login why doesn't it move to the next activity? iplease help if anyone know how to getplease help if anyone know how to get client id for start refineFinefoods Ant Design Admin Panel - refin...Hi everyone, I am new to refine admin framework. My background from SPA react js and Node middlewareNot able to select refine-react option.In quick start guide it’s mentioned that I can select project type I am not getting react option, shSome Ant Design Component's API are deprecated.As title, Some Ant Design's Component's API are deprecated. like...Modal, Breadcrumb, and Menu WouHow to Delete Table that Contains many to many relation?Hello everyone, I am using next.js, mantine, and supabase db. But, i have a problem with delete the How to change the mutation call when the user clicks confirm?How to change the mutation call when the user click: Deletar? By default, it is set to "deleteFacetIcross origin error imagehello everyone I have a problem with creating a new image(), based on an external URL given me crossuseform attach initialfilter strapi v4``` } = useForm({ refineCoreProps: { mutationMode: "pessimistic", //config: { getting startedhow should I get started with refine.dev?Display only certain rows in List view MuiHello everyone !! I have a user ressources in which i have all users (admin and non admin) and need [antd] using filterDropdown and RangePicker to filter date in a range of datesHi, I'm having some trouble filtering data using `<DatePicker.RangePicker>` and `<Filterdorpdown>` fant-modal-wrap background color in useModalI'm using useModal in my project "@pankod/refine-antd": "^4.7.3" Why the modal's background is totaAn error occured while creating git commit.Hello, I'm very new to this and I apologise for my cluelessness but I'm getting this error every tim