Improve typing for render functions

[mstn]

Problem

A render function is defined as

(props: FormFieldProps | FormArrayProps | FormSectionProps) => JSX.Element

(FormSectionProps are coming soon)

We are not able to check at compile time if a render function is compatible with the corresponding gql type. For example, we can define a FormSection render for a scalar type. At run time we will get an error since the run-time argument does not have the expected properties.

Possible solution

Refactor apolloForm options in this way

{
  types: {
    scalars: { name: (props: FormFieldProps) => JSX.Element }
    enums: { name: (props: EnumFieldProps) => JSX.Element }
    objects:{ name:  (props: FormSectionProps) => JSX.Element }
  },
  fields: {
    scalars: { name: (props: FormFieldProps) => JSX.Element }
    enums: { name: (props: EnumFieldProps) => JSX.Element }
    objects: { name:  (props: FormSectionProps) => JSX.Element }
    array: { name: (props: FormSectionProps) => JSX.Element }
  }
}

In this way we can raise an error at run time when the form is built if a render does not match a gql type.

Can we do better with a compile time type check?

[mstn]

Same problem here

export type FormRenderer = {
  render: FormRenderFunction;
} & Partial<BaseFieldProps>;

Partial<BaseFieldProps> makes sense only for fields and we could also have properties that make sense only for 'FormSection'.