GD
Gadget Developers•4w ago
shunt

AutoForm BelongsTo fields not working

Typescript project. I'm using an AutoForm to create an inventory item, with the model schema depicted. All the Autoform Fields work, except for those that are relational. I get this error: [GraphQL] Variable "$item" got invalid value "11" at "item.sublocation"; Expected type "InternalBelongsToInput" to be an object. [GraphQL] Variable "$item" got invalid value "12" at "item.location"; Expected type "InternalBelongsToInput" to be an object. [GraphQL] Variable "$item" got invalid value "1" at "item.user"; Expected type "InternalBelongsToInput" to be an object. Is it the case that AutoForm does not currently support these fields, as the api is requiring an object?
No description
1 Reply
Smelvin
Smelvin•4w ago
Hi Shunt, I am not sure how you wrote your component, but I have an example here on assigning relationships with AutoForms, 
// select prop to prevent refetching with conditionally rendered inputs
const AutoFormWithCustomChildren = () => {
  return (
    <AutoForm
      action={api.widget.update}
      findBy="123"
      select={
        // The `select` prop overrides the default selection, which will not include the conditionally rendered inputs.
        {
          widget: {
            name: true,
            inventoryCount: true,
            owner: {
              // For relationship fields, select related model fields
              id: true,
              name: true,
            },
          },
        }
      }
    >
      <AutoInput field="name" />
      <ConditionallyAppearingAutoInputs />
      <AutoSubmit />
    </AutoForm>
  );
};

const ConditionallyAppearingAutoInputs = () => {
  const [showMoreInputs, setShowMoreInputs] = useState(false);

  return (
    <>
      <Button onClick={() => setShowMoreInputs(!showMoreInputs)}>{showMoreInputs ? "Hide" : "Show"} more inputs</Button>
      {showMoreInputs && (
        <>
          {/* These fields are not included in the initial existing record selection by default. */}
          {/* They will cause a refetch when rendered for the first time unless the `select` prop is used to includes these fields. */}
          <AutoInput field="inventoryCount" />
          <AutoInput field="owner" />
        </>
      )}
    </>
  );
};
// select prop to prevent refetching with conditionally rendered inputs
const AutoFormWithCustomChildren = () => {
  return (
    <AutoForm
      action={api.widget.update}
      findBy="123"
      select={
        // The `select` prop overrides the default selection, which will not include the conditionally rendered inputs.
        {
          widget: {
            name: true,
            inventoryCount: true,
            owner: {
              // For relationship fields, select related model fields
              id: true,
              name: true,
            },
          },
        }
      }
    >
      <AutoInput field="name" />
      <ConditionallyAppearingAutoInputs />
      <AutoSubmit />
    </AutoForm>
  );
};

const ConditionallyAppearingAutoInputs = () => {
  const [showMoreInputs, setShowMoreInputs] = useState(false);

  return (
    <>
      <Button onClick={() => setShowMoreInputs(!showMoreInputs)}>{showMoreInputs ? "Hide" : "Show"} more inputs</Button>
      {showMoreInputs && (
        <>
          {/* These fields are not included in the initial existing record selection by default. */}
          {/* They will cause a refetch when rendered for the first time unless the `select` prop is used to includes these fields. */}
          <AutoInput field="inventoryCount" />
          <AutoInput field="owner" />
        </>
      )}
    </>
  );
};
And more information on this example here: https://docs.gadget.dev/reference/react/auto#custom-selection-and-conditionally-rendered-inputs I would be happy to take a look, let us know if this helps!

Did you find this page helpful?