useList

use list hook queryoptions do filtering on client side

9 Replies

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useList hook in Refine supports the filtering feature. You can pass the filters property to enable filtering. The useList hook passes the filters property to the getList method from the dataProvider to handle filtering. Dynamically changing the filters property will trigger a new request. Here is an example of how to use the filters property with the useList hook:

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const [value, setValue] = useState("Cotton");  
  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 filters: [  
 {  
 field: "material",  
 operator: "eq",  
 value,  
 },  
 ],  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <div>  
 <span> material: </span>  
 <select value={value} onChange={(e) => setValue(e.target.value)}>  
 {["Cotton", "Bronze", "Plastic"].map((material) => (  
 <option key={material} value={material}>  
 {material}  
 </option>  
 ))}  
 </select>  
  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 </div>  
 );  
};

import { useState } from "react";  
import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const [value, setValue] = useState("Cotton");  
  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 filters: [  
 {  
 field: "material",  
 operator: "eq",  
 value,  
 },  
 ],  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <div>  
 <span> material: </span>  
 <select value={value} onChange={(e) => setValue(e.target.value)}>  
 {["Cotton", "Bronze", "Plastic"].map((material) => (  
 <option key={material} value={material}>  
 {material}  
 </option>  
 ))}  
 </select>  
  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 </div>  
 );  
};

In this example, the useList hook is used to fetch a list of products filtered by the material type. The filters property is an array of filter objects, each specifying a field, operator, and value for the filter condition. The useState hook is used to manage the selected material type, and changing the selected material triggers a new request with the updated filter. For more information, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list). However, if you want to handle client-side filtering, you might want to consider using the useTable hook with filters.mode: "off". This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

unwilling-turquoise•6mo ago

@kapa.ai how do i do client side filtering with the useList hook

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useList hook in Refine is designed to fetch data from the server and doesn't directly support client-side filtering. It fetches data according to the sorter, filter, and pagination states and passes these states to the getList method from the dataProvider to handle filtering, sorting, and pagination on the server-side. If you want to perform client-side filtering, you would need to fetch all the data first and then use JavaScript's array methods to filter the data on the client-side. However, please note that this approach is not recommended for large datasets as it could lead to performance issues. Here's a basic example of how you could do this:

import { useList } from "@refinedev/core";  

const MyComponent = () => {  
 const { data } = useList({  
 resource: "posts",  
 });  

 const filteredData = data?.data.filter(post => post.title.includes("refine"));

 return (
   <div>
     {filteredData.map(post => (
       <div key={post.id}>{post.title}</div>
     ))}
   </div>
 );
};

import { useList } from "@refinedev/core";  

const MyComponent = () => {  
 const { data } = useList({  
 resource: "posts",  
 });  

 const filteredData = data?.data.filter(post => post.title.includes("refine"));

 return (
   <div>
     {filteredData.map(post => (
       <div key={post.id}>{post.title}</div>
     ))}
   </div>
 );
};

In this example, useList is used to fetch all posts, and then JavaScript's filter method is used to filter the posts on the client-side. For more complex scenarios or for large datasets, you might want to consider using the useTable hook with filters.mode: "off". This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

unwilling-turquoise•6mo ago

@kapa.ai so its not possibly nativly in the hook itself

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Correct, the useList hook in Refine is designed for server-side operations and does not natively support client-side filtering. It's designed to work with a dataProvider to fetch data from a server, and it passes filter, sort, and pagination parameters to the server for handling. If you want to perform client-side filtering, you would need to fetch all the data first and then use JavaScript's array methods to filter the data on the client-side. However, this approach is not recommended for large datasets due to potential performance issues. For more complex scenarios or for large datasets, you might want to consider using the useTable hook with filters.mode: "off". This will disable server-side filtering and allow you to handle filtering on the client side. You can find more information about this in the useTable documentation (https://refine.dev/docs/data/hooks/use-table#how-can-i-handle-client-side-filtering). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

reduced-jade•6mo ago

Hello @Joe Gaffney please check our documentation https://refine.dev/docs/data/hooks/use-list/#mode

useList | Refine

useList is an extended version of TanStack Query's useQuery that supports all of its features and also adds some more.