quickest-silver•10mo ago

I want to use useForm even though I don't have an ID for a user-profile edit

Hello refine community! I want to build a UserProfile Form with the ease of the useForm hook Refine provides but I'm running into an issue where no request will be made when no ID is specified. So what I need is an edit page without an ID, since the user should only be able to edit his own profile. useForm is firing the network request when I have something like this:

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
  id: 1,
});

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
  id: 1,
});

but not if I have something like this:

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
});

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
});

How would I do this?

6 Replies

kapa.ai•10mo ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook in Refine is designed to handle the form state and actions, including fetching the initial data for the form when you're editing a record. When you use useForm with "edit" or "clone" mode, the id is required. By default, useForm infers the id from the URL. If the URL doesn't contain the id params, you must provide it manually. In your case, since you want to edit the user's own profile, you can set the id to the user's id when you call useForm. Here's an example:

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
  id: user.id, // replace `user.id` with the actual user id
});

const { formProps, queryResult } = RefineAntd.useForm({
  resource: 'profile',
  id: user.id, // replace `user.id` with the actual user id
});

If you don't have the user's id at the time of calling useForm, you can use the setId method to set the id after the form is mounted:

const { formProps, queryResult, setId } = RefineAntd.useForm({
  resource: 'profile',
});

// somewhere in your code, when you have the user's id
setId(user.id); // replace `user.id` with the actual user id

const { formProps, queryResult, setId } = RefineAntd.useForm({
  resource: 'profile',
});

// somewhere in your code, when you have the user's id
setId(user.id); // replace `user.id` with the actual user id

For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

quickest-silver•10mo ago

Thank you @kapa.ai Ultimately I don't want the user to provide the ID as this would allow for tinkering with the passed ID and I wouldn't even do something with it in the backend code. Is there a way to omit the ID?

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to omit the id in the useForm hook, you can do so. However, please note that the useForm hook uses the id to fetch the initial data for the form when you're editing a record. If you omit the id, no request will be made to fetch the initial data. In your case, since you're editing the user's own profile and you don't want to use the id, you might need to fetch the user's profile data manually and then use it as the initial values for the form. Here's an example:

// Fetch the user's profile data manually
const user = fetchUserProfile(); // replace this with your actual code to fetch the user's profile

const {{ formProps, queryResult }} = RefineAntd.useForm({{
  resource: 'profile',
  initialValues: user, // use the fetched user's profile data as the initial values
}});

// Fetch the user's profile data manually
const user = fetchUserProfile(); // replace this with your actual code to fetch the user's profile

const {{ formProps, queryResult }} = RefineAntd.useForm({{
  resource: 'profile',
  initialValues: user, // use the fetched user's profile data as the initial values
}});

In this example, fetchUserProfile is a function that fetches the user's profile data. You need to replace it with your actual code to fetch the user's profile. Please note that this is just a workaround. The useForm hook is designed to work with an id, and omitting the id might lead to unexpected behavior. If possible, I would recommend using the id as intended. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

quickest-silver•10mo ago

I will pass the ID for now as a decoy, but I'd be much happier for an easier and more straight forward solution 😄