React Ant Design Dynamic Graphql Form Using Typescript : Part (1/3)

19-Mar-20191 Min Read

This is an advanced typescript tutorial for react development.


Often we encounter situations where we have to write the basic forms (register, login, newsletter,etc..) and submit them for graphql mutations. It's a tiresome task to do it for all the forms in your project. To tackle such situation we can create a dynamic form generator with full static type support and custom validation handler.

1. Define the interfaces#

Create a file called interface.ts and add the following interfaces.

1.1 Form Field#

IFormField<TVariables> provides the definition for all individual field items. Where TVariables are the form element ids (check the final example)

1.2 Form Items#

IFormItems<TVariables> contains all the field definitions for given variable keys.

1.3 Base props#

IGenericFormBaseProps<TVariables, TData> is the base interface for form component. Base interface provides all the necessary component props except the props from antd FormComponentProps<TVariables> interface. TData is the result interface of graphql mutation.

1.4 Form Props#

This is our final interface. This extends from IGenericFormBaseProps<TVariables, TData> & ormComponentProps<TVariables>