useForm getValues vs refineCore query

I have an Edit form that I set up like

export const PanelEdit = () => {
  const methods = useForm({
    mode: "onChange",
    criteriaMode: "all",
    shouldFocusError: true,
  });
  let {
    saveButtonProps,
    getValues,
    formState: { errors },
    refineCore: { query, formLoading, onFinish },
  } = methods;
  console.log(JSON.stringify(getValues()));
  console.log(JSON.stringify(query?.data));
  return (
    <FormProvider {...methods}>
      <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
        <Box
          component="form"
          sx={{
            display: "flex",
            flexDirection: "column",
          }}
          autoComplete="off"
        >
          <PanelFields />
        </Box>
      </Edit>
    </FormProvider>
  );

export const PanelEdit = () => {
  const methods = useForm({
    mode: "onChange",
    criteriaMode: "all",
    shouldFocusError: true,
  });
  let {
    saveButtonProps,
    getValues,
    formState: { errors },
    refineCore: { query, formLoading, onFinish },
  } = methods;
  console.log(JSON.stringify(getValues()));
  console.log(JSON.stringify(query?.data));
  return (
    <FormProvider {...methods}>
      <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
        <Box
          component="form"
          sx={{
            display: "flex",
            flexDirection: "column",
          }}
          autoComplete="off"
        >
          <PanelFields />
        </Box>
      </Edit>
    </FormProvider>
  );

When reviewing the value of both query.data and getValues...I would expect the payloads to be the same. As in, the getValues from the Form have all the same fields. But they dont- This is the value of query.data

{"data":{"id":3,"isActive":true,"createdAt":"2025-03-02T03:16:04.066Z","updatedAt":"2025-03-03T01:53:56.036Z","panelurn":"nesting:solari.panel:bb2ea","clienturn":"nesting:solari.client:default","name":"This is a Type Test for a Panel","type":"URL","status":null,"description":"First Panel","duration":0,"panelOptions":{"option":{"url":{"url":"http://google.com"}}}}}

{"data":{"id":3,"isActive":true,"createdAt":"2025-03-02T03:16:04.066Z","updatedAt":"2025-03-03T01:53:56.036Z","panelurn":"nesting:solari.panel:bb2ea","clienturn":"nesting:solari.client:default","name":"This is a Type Test for a Panel","type":"URL","status":null,"description":"First Panel","duration":0,"panelOptions":{"option":{"url":{"url":"http://google.com"}}}}}

And this is the value of getValues()

{"panelurn":"nesting:solari.panel:bb2ea","duration":0,"id":3,"clienturn":"nesting:solari.client:default","name":"This is a Type Test for a Panel","description":"First Panel","type":"URL","createdAt":"2025-03-02T03:16:04.066Z","updatedAt":"2025-03-03T01:53:56.036Z","isActive":true}

{"panelurn":"nesting:solari.panel:bb2ea","duration":0,"id":3,"clienturn":"nesting:solari.client:default","name":"This is a Type Test for a Panel","description":"First Panel","type":"URL","createdAt":"2025-03-02T03:16:04.066Z","updatedAt":"2025-03-03T01:53:56.036Z","isActive":true}

Notice the panelOptions are not copied over. So- Do I need to define all the fields I want to be available somewhere?
The UI is dynamic, needing the value of panelOptions to be defined before it does some conditional logic. Im trying not to do propDrilling with the value of query.data down to the subcomponents...and figured using useFormContext would be able to query the data. But since the fields I need are not there- Not sure the best path to get the data I need in the getValues() object

3 Replies

kapa.ai•2mo ago

Hi @mjd. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your question about the discrepancy between getValues() and refineCore.query.data in the useForm hook from @refinedev/react-hook-form. The issue you're experiencing seems to be related to how the form fields are registered and how the initial values are set. The panelOptions field is present in the query.data but not in the getValues() result, which suggests that this field might not be properly registered in the form. Here are a few points to consider: 1. Field Registration: Make sure that all fields, including nested fields like panelOptions, are properly registered in your form. This can be done using the register function or by using the Controller component for more complex inputs. 2. Initial Values: The useForm hook from @refinedev/react-hook-form should automatically set the initial values from the query.data. However, there might be a timing issue where the fields are not yet registered when the initial values are set. 3. Controller Component: If you're using the Controller component for some fields, make sure to provide the defaultValue prop with the corresponding value from query.data. To address your specific questions: 1. You don't necessarily need to define all fields you want to be available somewhere explicitly, but they do need to be registered with the form. 2. For accessing the full data including panelOptions in your subcomponents, you have a few options: - Pass the query.data down to subcomponents that need it. - Use the useWatch hook from react-hook-form to observe specific form values. - Use the useFormContext hook in combination with proper field registration. Here's a suggestion to potentially resolve the issue: 1. In your PanelEdit component, you can try to set the form values explicitly when the query data is available:

const {
  saveButtonProps,
  getValues,
  setValue,
  formState: { errors },
  refineCore: { query, formLoading, onFinish },
} = methods;

React.useEffect(() => {
  if (query?.data?.data) {
    Object.entries(query.data.data).forEach(([key, value]) => {
      setValue(key, value);
    });
  }
}, [query?.data?.data, setValue]);

const {
  saveButtonProps,
  getValues,
  setValue,
  formState: { errors },
  refineCore: { query, formLoading, onFinish },
} = methods;

React.useEffect(() => {
  if (query?.data?.data) {
    Object.entries(query.data.data).forEach(([key, value]) => {
      setValue(key, value);
    });
  }
}, [query?.data?.data, setValue]);

This approach ensures that all fields from query.data, including nested fields like panelOptions, are set in the form. 2. In your PanelFields component, make sure to register or use Controller for all fields, including nested ones:

import { useFormContext, Controller } from "react-hook-form";

export const PanelFields = () => {
  const { control, register } = useFormContext();

  return (
    <>
      <input {...register("name")} />
      <input {...register("description")} />
      <Controller
        name="panelOptions.option.url.url"
        control={control}
        render={({ field }) => <input {...field} />}
      />
      {/* Other fields */}
    </>
  );
};

import { useFormContext, Controller } from "react-hook-form";

export const PanelFields = () => {
  const { control, register } = useFormContext();

  return (
    <>
      <input {...register("name")} />
      <input {...register("description")} />
      <Controller
        name="panelOptions.option.url.url"
        control={control}
        render={({ field }) => <input {...field} />}
      />
      {/* Other fields */}
    </>
  );
};

These suggestions are based on the general behavior of useForm from @refinedev/react-hook-form. However, it's worth noting that there might be some specific behaviors or limitations that are not fully documented in the provided knowledge sources. If these suggestions don't resolve the issue, you might want to consider opening an issue on the Refine GitHub repository for more specific guidance from the maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@752243518545854624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rising-crimsonOP•2mo ago

I do like the useEffect solution that doesnt pollute by adding fields until I actually need them

useForm getValues vs refineCore query

Did you find this page helpful?