uselist params

How can I use useList with params?

8 Replies

Hi @Jaoc1811. 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 is used to fetch data according to sort, filter, pagination, etc. from a resource. It returns the data and some functions to control the query. Here is a basic example of how to use the useList hook:

import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 );  
};

import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 );  
};

In this example, useList is used to fetch data from the "products" resource. The data, loading state, and error state are then used to render the product list. If you want to fetch data with specific parameters such as filters, sorters, and pagination, you can pass these as additional parameters to the useList hook. For example:

const { data: listResponse } = useList({ 
  resource: "products",
  filters: [{ field: "material", operator: "eq", value: "wooden" }],
  sorters: [{ field: "ID", order: "desc" }],
  pagination: { page: 1, perPage: 5 },
});

const { data: listResponse } = useList({ 
  resource: "products",
  filters: [{ field: "material", operator: "eq", value: "wooden" }],
  sorters: [{ field: "ID", order: "desc" }],
  pagination: { page: 1, perPage: 5 },
});

In this example, useList is used to fetch 5 products with the material field equals to wooden, sorted by ID field in descending order. For more information, you can refer to the Refine documentation on useList (https://refine.dev/docs/data/hooks/use-list). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

adverse-sapphire•5mo ago

@kapa.ai how can I make a get request with params? like GET /products/:category

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To make a GET request with parameters in Refine, you can use the useGet hook. However, the useGet hook is not directly mentioned in the provided extracts. But, based on the information from the extracts, you can use the fetch function to make a GET request with parameters. Here's an example:

const response = await fetch(`${url}/${resource}?${query}`);
const data = await response.json();

const response = await fetch(`${url}/${resource}?${query}`);
const data = await response.json();

In this example, url is the base URL of your API, resource is the specific endpoint you want to hit (like 'products'), and query is the query string that represents your parameters. To construct the query string, you can use an array of parameters and join them with the "&" character:

const params = [];
params.push(`category=${category}`);
const query = params.join("&");

const params = [];
params.push(`category=${category}`);
const query = params.join("&");

In this example, category is the category you want to use as a parameter. So, if you want to make a GET request to /products/:category, you can replace resource with 'products' and query with your category:

const category = 'your-category';
const params = [];
params.push(`category=${category}`);
const query = params.join("&");

const response = await fetch(`<http://your-api-url/products?${query}`>);
const data = await response.json();

const category = 'your-category';
const params = [];
params.push(`category=${category}`);
const query = params.join("&");

const response = await fetch(`<http://your-api-url/products?${query}`>);
const data = await response.json();

Please note that this is a general JavaScript way of making a GET request with parameters. The actual implementation may vary depending on the specifics of your API and how it handles parameters. For more specific information on how to make requests with Refine, you can refer to the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

adverse-sapphire•5mo ago

@kapa.ai how can i make a get request with params using useGet?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided extracts do not contain specific information on how to use the useGet hook with parameters in Refine. For accurate information, I recommend checking the Refine documentation (https://refine.dev/docs) or the source code of the useGet hook in the Refine library. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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