extended-salmon
extended-salmon12mo ago

Passing parameters to useOne refetch

Hi all, I want to call the refetch method provided by the useOne hook on a button click but want to pass a different id to the method on every click. Is there a way we can pass parameters to the refetch method?
5 Replies
kapa.ai
kapa.ai12mo ago
Hi @krockstar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useOne hook in refine does provide a refetch method, but based on the information provided in the extracts, it doesn't seem like the refetch method accepts parameters directly. However, you can achieve the desired functionality by using a state variable for the id and updating this state variable on button click. The useOne hook will automatically trigger a new request when the id changes. Here's an example of how you can do this:
import { useState } from "react";
import { useOne, HttpError } from "@refinedev/core";

interface IProduct {
id: number;
name: string;
material: string;
}

const ProductList: React.FC = () => {
const [id, setId] = useState(1);

const { data, isLoading, isError } = useOne<IProduct, HttpError>({
resource: "products",
id,
});

const product = data?.data;

if (isLoading) {
return <div>Loading...</div>;
}

if (isError) {
return <div>Something went wrong!</div>;
}

return (
<div>
<h3>Product Details</h3>
<p>id: {product?.id}</p>
<p>name: {product?.name}</p>
<p>material: {product?.material}</p>

<br />

<button
onClick={() => setId((prev) => prev - 1)}
disabled={id === 1}
>
{"<"} Prev Product
</button>
<button onClick={() => setId((prev) => prev + 1)}>
Next Product {">"}
</button>
</div>
);
};
import { useState } from "react";
import { useOne, HttpError } from "@refinedev/core";

interface IProduct {
id: number;
name: string;
material: string;
}

const ProductList: React.FC = () => {
const [id, setId] = useState(1);

const { data, isLoading, isError } = useOne<IProduct, HttpError>({
resource: "products",
id,
});

const product = data?.data;

if (isLoading) {
return <div>Loading...</div>;
}

if (isError) {
return <div>Something went wrong!</div>;
}

return (
<div>
<h3>Product Details</h3>
<p>id: {product?.id}</p>
<p>name: {product?.name}</p>
<p>material: {product?.material}</p>

<br />

<button
onClick={() => setId((prev) => prev - 1)}
disabled={id === 1}
>
{"<"} Prev Product
</button>
<button onClick={() => setId((prev) => prev + 1)}>
Next Product {">"}
</button>
</div>
);
};
In this example, the id state variable is passed to the useOne hook. When the "Next Product" or "Prev Product" button is clicked, the id state variable is updated, which triggers a new request in the useOne hook. You can find more details about the useOne hook in the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useOne). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@194753773376241664> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade
deep-jade12mo ago
refine uses TankStack Query under the hood and refetch don't take parameters https://tanstack.com/query/v4/docs/react/reference/useQuery
deep-jade
deep-jade12mo ago
bot is right. when params changed, request will sent. you don't need refetch
extended-salmon
extended-salmon12mo ago
Okay thanks! @alicanerdurmaz