Manage client side React/GraphQL validations with zero config (once setup)

0-validators.graphql

query validators($model: String!, $attributes: Hash) {
  validators(model: $model, attributes: $attributes) {
    attributes
  }
}

1-response.json

{
  "organizationId": {
    "type": "integer",
    "required": true,
    "requiredMessage": "You must enter a value for Organization"
  },
  "active": {
    "type": "boolean"
  },
  "name": {
    "type": "string",
    "required": true,
    "requiredMessage": "You must enter a value for Name"
  },
  "city": {
    "type": "string",
    "required": true,
    "requiredMessage": "You must enter a value for City"
  },
  "state": {
    "type": "string",
    "required": true,
    "requiredMessage": "You must enter a value for State"
  },
  "timezone": {
    "type": "string"
  },
  "category": {
    "type": "string",
    "required": true,
    "requiredMessage": "You must enter a value for Category"
  },
  "address": {
    "type": "string"
  },
  "zipCode": {
    "type": "string"
  }
}

2-String.jsx

import React from "react";
import PropTypes from "prop-types";
import _get from "lodash/get";
import { Form, Col } from "react-bootstrap";
import FormFieldError from "@/utils/FormFieldError";

const String = ({
  defaultValue,
  errors,
  formName,
  hint,
  label,
  name,
  register,
  validations,
  sizes,
  disabled = false,
  ...props
}) => {
  let required = false;

  try {
    required = _get(validations, name).required && "*";
  } catch (e) {
    required = `missing validation`;
  }

  return (
    <Col
      xs={sizes?.xs || false}
      sm={sizes?.sm || false}
      md={sizes?.md || false}
      lg={sizes?.lg || false}
      xl={sizes?.xl || false}
    >
      <Form.Group controlId={`${formName}.${name}`}>
        <Form.Label>
          {required && <span className="required">{required}</span>}
          {label}
        </Form.Label>
        <Form.Control
          disabled={disabled}
          type="text"
          name={name}
          defaultValue={defaultValue}
          size="lg"
          ref={register(_get(validations, name))}
          {...props}
          data-1p-ignore
        />
        {hint && (
          <Form.Text id={`${formName}.${name}`} muted>
            {hint}
          </Form.Text>
        )}

        <FormFieldError errors={errors} attr={name} validations={validations} />
      </Form.Group>
    </Col>
  );
};

String.propTypes = {
  defaultValue: PropTypes.string,
  disabled: PropTypes.bool,
  errors: PropTypes.object,
  formName: PropTypes.string,
  hint: PropTypes.string,
  label: PropTypes.string,
  name: PropTypes.string,
  register: PropTypes.func,
  sizes: PropTypes.object,
  validations: PropTypes.object,
};

export default String;

3-usage.js

<String
  defaultValue={...}
  errors={errors}
  formName="someForm"
  label="Some Label"
  name="attrName"
  register={register}
  validations={validations}
/>