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

19-Mar-20191 Min Read
note

This is an advanced typescript tutorial for react development.

Scenario#

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>