uselist params

How can I use useList with params?
K
kapa.ai41d ago
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: ----------------------
K
kapa.ai41d ago
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
F
foreign-sapphire41d ago
@kapa.ai how can I make a get request with params? like GET /products/:category
K
kapa.ai41d 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: ----------------------
K
kapa.ai41d ago
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
F
foreign-sapphire41d ago
@kapa.ai how can i make a get request with params using useGet?
K
kapa.ai41d 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: ----------------------
K
kapa.ai41d ago
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
Issues with remix and useGo with remix router`I have the following error: Cannot update a component (`RouterProvider`) while rendering a differenCreating multiple entries with AntD's Create and useForm with SupabaseI have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, how to reset modal component state on close?this is in my modal component: ``` interface Props { modalProps: ModalProps formProps: FormPropRefine and Server ComponentsHello, is there any info regarding Refine and server components? I found this blog post: https://refrefine build --sourcemaprefine build --sourcemap misses mapping for src files the custom code and only includes nodemodulesREFINE GRAPHQL MOCK DATABASEHello, i have a question, does refine mock database in graphql resetted?why can't use underline as name?why can't use underline as name? { name: 'temp_products', How to use _ as name but use path - instead of _How to use _ as name but use path - instead of _How do I send with admin ID?``` import { AuthBindings } from '@refinedev/core' import nookies from 'nookies' const mockUsers = sidemenu elements namehow can I put a name differente than the resource name in the menu elementsuseList disableIs it possible to disable useList based on prop valueuseUpdateHow to update a resource using on button clickHow to current page to 1 on apply filtersHere is my getList code getList: async ({ resource, pagination, filters, meta }) => { consRefresh the page when closing the modal``` export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => { const { Button click not workingHello All, I have a form that suddenly doesn' t work I have been upgrading the project to 4 and am pAccessing data using useoneThis is my .tsx file import { Typography, Spin, Alert } from "antd"; import { useOne } from "@refineresolversis there a resolver sample for refine app crm?NavegationHow to put the sider menu on the top navegation using ant designgrapql refine crm appdo i still need to create typedefs and resolvers on my backend?Refine app crmIs there any database schema for the refine app crm? for the typeDefs and resolvers?