Filtering with UseSelect Hooks

then-purple · 2023-03-12T11:54:11.862Z

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

K

kapa.ai•3/12/23, 11:54 AM

Hey @Us3r! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question.

K

kapa.ai•3/12/23, 11:54 AM

----------------------
It looks like you're trying to filter the Customer table by Category. To do this, you'll need to use the

useSelect

useSelect

useSelect

useSelect hook from Refine. This hook allows you to fetch data from a REST API and pass it to the

<Select>

<Select>

<Select>

<Select> component.

Here's an example of how to use the

useSelect

useSelect

useSelect

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}  
 />  
 );  
};

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

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

useSelect

useSelect

useSelect hook is passing the correct parameters to the API. In this case, you'll need to make sure that the

filter[0]

filter[0]

filter[0]

filter[0] parameter is set to

id||$in||{{category_id}}

id||$in||{{category_id}}

id||$in||{{category_id}}

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

K

kapa.ai•3/12/23, 11:54 AM

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

B

brilliant-lime•3/12/23, 12:01 PM

@Us3r you can update tags like this

B

brilliant-lime•3/12/23, 12:02 PM

Thank you for clear and detailed explanation. i will debug

B

brilliant-lime•3/12/23, 12:36 PM

Hi @Us3r again, can you give us your server API for debug?

Bbrilliant-lime Hi @Us3r again, can you give us your server API for debug?

T

then-purpleOP•3/12/23, 12:47 PM

https://github.com/Us3r-gitHub/Refine-Nest/tree/nest_server

With an extra step to setup DB

Create a DB
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.

B

brilliant-lime•3/12/23, 12:52 PM

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

Bbrilliant-lime I understand. thank you again for clear explanation. i will debug when i find a ...

T

then-purpleOP•3/12/23, 12:59 PM

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

T

then-purpleOP•3/12/23, 1:02 PM

Wow refine@4

Sounds good, can't wait and try

B

brilliant-lime•3/12/23, 1:04 PM

this our RFC.
https://github.com/refinedev/refine/discussions/3527
We would be happy for all feedbacks.

B

brilliant-lime•3/15/23, 4:26 AM

@Us3r Hi again, sorry for late response. finally I found time to debug.

in

src/pages/customer/list.tsx

src/pages/customer/list.tsx

src/pages/customer/list.tsx

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 },
  })

  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

useMany

and nextjs-crud gives error. maybe wee need to fix this in

refine-nestjsx-crud

refine-nestjsx-crud

refine-nestjsx-crud

refine-nestjsx-crud. i will discus with core team.

anyway,

 queryOptions: { enabled: !!categoryIds.length }

queryOptions: { enabled: !!categoryIds.length }

 queryOptions: { enabled: !!categoryIds.length }

queryOptions: { enabled: !!categoryIds.length } this will work

Bbrilliant-lime @Us3r Hi again, sorry for late response. finally I found time to debug. in `sr...

T

then-purpleOP•3/15/23, 8:50 AM

It's work, thank you for your support
You're best

T

then-purpleOP•3/15/23, 8:51 AM

At this point, the issue is not useSelect but useMany hooks right?

Tthen-purple At this point, the issue is not useSelect but useMany hooks right?

B

brilliant-lime•3/15/23, 9:17 AM

yes