quickest-silver•15mo 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•15mo 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•15mo ago

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

continuing-cyan•15mo ago

refine uses TankStack Query under the hood and refetch don't take parameters https://tanstack.com/query/v4/docs/react/reference/useQuery

useQuery | TanStack Query Docs

const { data,

continuing-cyan•15mo ago

bot is right. when params changed, request will sent. you don't need refetch

quickest-silver•15mo ago

Okay thanks! @alicanerdurmaz