[BUG] queryOptions.enabled causes undefined request to be sent in useForm

[aliemir]

Describe the bug

When working with a form in "edit' mode if the id is obtained in async manner, we're disabling the query with queryOptions.enabled: !!id to avoid console.warning about missing ID. This causes a broken request to be sent with id: undefined to the data provider when id is obtained.

Flow

• useForm doesn't send a request when id is not defined
• id is obtained and passed to the useForm
• useForm sends one request with id: undefined and immediately sends a new one with correct id.

Steps To Reproduce

import React from "react";
import { useForm } from "@refinedev/core";

const MyComponent = () => {
  const [id, setId] = React.useState(undefined);

  React.useEffect(() => {
    // Set `id` after 1 second of delay for demo purposes.
    setTimeout(() => {
      setId("123");
    }, 1000);
  }, []);

  const form = useForm({
    resource: "posts",
    id: id,
    queryOptions: {
      // Disable query if id is not defined
      enabled: typeof id !== "undefined",
    },
  });
  
  return ( ... );
}

After the page is rendered,

• No requests will be sent before id is set
• When id is set, a request will be sent with id: undefined
• Immediately after the first request, a request will be made with id: "123"

Expected behavior

Changes in the id prop is set in an effect, this causes one render delay before id is set properly, yet when we pass queryOptions.enabled by looking at the id prop, query will be enabled right when id is set. This causes a broken request to be made to the API.

The correct behavior should be setting the id immediately without a delay, then no extra requests will be made.

Packages

• @refinedev/core
• @refinedev/react-hook-form
• @refinedev/antd
• @refinedev/mantine

Additional Context

This issue is related with the useForm of @refinedev/core and affects all extensions of the useForm in other Refine packages.