full-greenF
Refine•11mo ago•
5 replies
full-green

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>
  );

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"}}}}}

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}


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
Was this page helpful?