genetic-orange•2y ago

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.

11 Replies

kapa.ai•2y 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•2y 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). ----------------------

Select - Ant Design

kapa.ai•2y ago

<@612139467452448784> kapa.ai is still learning and improving, please let us how it did by reacting below

extended-salmon•2y ago

@Us3r you can update tags like this

extended-salmon•2y ago

Thank you for clear and detailed explanation. i will debug Hi @Us3r again, can you give us your server API for debug?

genetic-orangeOP•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.

extended-salmon•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

genetic-orangeOP•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

extended-salmon•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

  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

genetic-orangeOP•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?

extended-salmon•2y ago

yes

Filtering with UseSelect Hooks

Did you find this page helpful?