foreign-sapphire•10mo ago

useForm get the property data

hi in Edit page I want to get the property data, in the code I provide, I get all the properties in same schema not the one I want how I can get the one that I want to edit on ? is there a way that useForm hook know automatically by current URL ?

  const {
    tableQueryResult: {data, isLoading, isError},
  } = useTable();

  const {
    tableQueryResult: {data, isLoading, isError},
  } = useTable();

9 Replies

kapa.ai•10mo ago

Hi @the_grateful. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, the useForm hook in Refine can automatically infer the id of the record you want to edit from the current URL. This is particularly useful when you are on an edit page and want to fetch the data for a specific record. Here's an example of how you can use the useForm hook to fetch and edit a specific record:

import { useForm } from "@refinedev/core";  
  
const EditPage = () => {  
 const { queryResult, formLoading, onFinish } = useForm<IProduct, HttpError, FormValues>({  
 resource: "products",  
 action: "edit",  
 id: 123,  
 });  
  
 const record = queryResult.data?.data;  
  
 const onSubmit = (event) => {  
 const data = Object.fromEntries(new FormData(event.target).entries());  
  
 onFinish(data);  
 };  
  
 return (  
 <form onSubmit={onSubmit}>  
 <label>  
 Name:  
 <input defaultValue={record?.name} />  
 </label>  
 <label>  
 Material:  
 <input defaultValue={record?.material} />  
 </label>  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useForm } from "@refinedev/core";  
  
const EditPage = () => {  
 const { queryResult, formLoading, onFinish } = useForm<IProduct, HttpError, FormValues>({  
 resource: "products",  
 action: "edit",  
 id: 123,  
 });  
  
 const record = queryResult.data?.data;  
  
 const onSubmit = (event) => {  
 const data = Object.fromEntries(new FormData(event.target).entries());  
  
 onFinish(data);  
 };  
  
 return (  
 <form onSubmit={onSubmit}>  
 <label>  
 Name:  
 <input defaultValue={record?.name} />  
 </label>  
 <label>  
 Material:  
 <input defaultValue={record?.material} />  
 </label>  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

In this example, useForm is used with the action: "edit" and id: 123 properties. This tells useForm to fetch the data for the record with id: 123 from the "products" resource. The fetched data is then available in the queryResult object. You can access the data for the specific property you want to edit from the record object. For example, record?.name and record?.material are used to get the "name" and "material" properties of the record, respectively. For more information, you can refer to the Refine documentation on useForm (https://refine.dev/docs/data/hooks/use-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

foreign-sapphireOP•10mo ago

@kapa.ai I use @pankod/refine-react-hook-form

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're using @pankod/refine-react-hook-form, you should be aware that there have been some changes in the way you import react-hook-form in the migration from version 3.x.x to 4.x.x of Refine. All react-hook-form imports that were re-exported from @pankod/refine-react-hook-form have been removed. You now need to import them directly from the react-hook-form package. If the package is not installed, you can install it with your package manager:

npm install react-hook-form

npm install react-hook-form

After that, you can import them from react-hook-form package directly. Here's an example of how the import changes:

// Old way
// import { useForm, Controller } from "@pankod/refine-react-hook-form";

// New way
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

// Old way
// import { useForm, Controller } from "@pankod/refine-react-hook-form";

// New way
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

You can find more information about these changes in the Refine migration guide (https://refine.dev/docs/migration-guide/3x-to-4x#import-changes-6). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

foreign-sapphireOP•10mo ago

@kapa.ai ok so with @pankod/refine-react-hook-form how I can get the data ?

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're using @pankod/refine-react-hook-form, you can use the useForm hook to get the data for a specific record. The useForm hook returns a refineCore object, which includes the queryResult property. You can use this property to access the data for the record you want to edit. Here's an example:

import { useForm } from "@pankod/refine-react-hook-form";

const EditPage = () => {
    const {  
        refineCore: { queryResult },  
    } = useForm();  

    const { data } = queryResult;  
    // Now you can use the data
};

import { useForm } from "@pankod/refine-react-hook-form";

const EditPage = () => {
    const {  
        refineCore: { queryResult },  
    } = useForm();  

    const { data } = queryResult;  
    // Now you can use the data
};

In this example, useForm is used to fetch the data for the record you want to edit. The fetched data is then available in the queryResult object. You can access the data for the specific property you want to edit from the data object. For more information, you can refer to the Refine documentation on useForm (https://refine.dev/docs/packages/react-hook-form/use-form#queryresult). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

xenial-black•10mo ago

Hello @the_grateful,    kapa.ai is now available for free at https://refine.dev/docs! To improve our community interaction on the Refine Discord server and keep our focus on Q&A sharing, we invite you to our website to use kapa.ai.

useForm get the property data

Did you find this page helpful?