Asynchronous Validation using TanStack Form and Zod

Illustrate performing asynchronous validation in TanStack Form using Zod to check the uniqueness of a username against an API.

import { useForm } from '@tanstack/react-form';
import { zodValidator } from '@tanstack/zod-form-adapter';
import { z } from 'zod';
import axios from 'axios';

Imports useForm from TanStack React Form, zodValidator from TanStack Zod Form Adapter, Zod itself, and Axios for making HTTP requests.

const asyncUsernameValidator = async (username) => {
  try {
    const response = await axios.get(`/api/username/${username}`);
    return response.data.isAvailable ? true : new Error('Username is already taken');
  } catch (error) {
    return new Error('Failed to validate username');
  }
};

Defines an async function to validate the username against a server-side resource using Axios to make a get request. It expects an API endpoint that checks if the username is available and returns an object with a boolean property 'isAvailable'.

const schema = z.object({
  username: z.string().min(1, 'Username is required').refine(asyncUsernameValidator, 'Username must be unique')
});

Defines a Zod schema for form validation. Uses 'refine' method for asynchronous validation of the username field to ensure uniqueness according to the asyncUsernameValidator.

const form = useForm({
  validate: zodValidator(schema),
  onSubmit: async (values) => {
    console.log('Form Submitted:', values);
  },
});

Initializes the form with useForm hook from TanStack React Form, applying the Zod schema validator. Handles form submission with an onSubmit function.

const { Form, Field } = form;
return (
  <Form>
    <Field
      name="username"
      component="input"
      placeholder="Username"
    />
    <button type="submit">Submit</button>
  </Form>
);

Defines the JSX structure for rendering the form, using destructuring to access Form and Field components from the useForm instance. Includes an input field for username and a submit button.