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

21st Mar 2019

This is an advanced typescript tutorial for react development.

Now we have the fully usable modular graphql component. Let's try to implement a login form using our custom component.

Create a basic input interface

This interface defines our TVariables & TData (Input field elements & Login result).

export interface ILoginInput {
  email: string
  password: string
}

export interface ILoginResult {
  user: IUser
}

Define form fields

For having a better code splitting, lets move our field definitions to a separate file other than the component. Create loginForm.ts file and add the following content.

import { IGenericFormBaseProps } from '../GenericForm/interface'
import { ILoginInput, ILoginResult } from './interface'

export const loginForm: IGenericFormBaseProps<ILoginInput, ILoginResult> = {
  mutationSchema: `mutation LOGIN($input: UserAuthInput!){
    user: login(input: $input){
      email
    }
  }`,
  submitBtnLabel: 'Login',
  loadingMessage: 'Logging In',
  fields: {
    email: {
      label: 'Email Address',
      componentProps: {
        type: 'email',
        placeholder: '[email protected]',
      },
      decoratorOption: {
        rules: [
          {
            required: true,
            message: 'Please enter your email address!',
          },
          {
            type: 'email',
            message: 'Value must be an email address',
          },
        ],
      },
    },
    password: {
      label: 'Password',
      componentProps: {
        type: 'password',
        placeholder: 'password',
      },
      decoratorOption: {
        rules: [
          {
            required: true,
            message: 'Please enter your password!',
          },
        ],
      },
    },
  },
  fieldOrder: ['email', 'password'],
}

Final Login Form

Now that we have our login interface and field definitions, let's create our login form.

import React from 'react'
import GenericForm from '../GenericForm'
import { ILoginInput, ILoginResult } from './interface'
import { loginForm } from './loginForm'

const LoginForm: React.FC<any> = ({ router }) => {
  return (
    <GenericForm<ILoginInput, ILoginResult>
      {...loginForm}
      transformValues={(values) => {
        return {
          input: values,
        }
      }}
    />
  )
}

export default LoginForm

Congrats!! You have now successfully created your dynamic graphql form with validations using react, antd and typescript.