[v2] Inferred types from schema and server side error handling

[donaldpipowitch]

Inferred types from schema

I saw in the blog post that z.input is used for the form values, but didn't saw z.output being used for validated form values in the submit handler. Is this a thing? I tried to test it, but it doesn't seem to work as I thought. It looks like the type is inferred from the defaults, not the schema? See onSubmit in this example:

import * as React from 'react';
import { createRoot } from 'react-dom/client';

import { RefinementCtx, z } from 'zod';

import { TanStackDevtools } from '@tanstack/react-devtools';
import { formDevtoolsPlugin } from '@tanstack/react-form-devtools';
import { formOptions, useForm } from '@tanstack/react-form';

function requiredOutput<T>({
  message = 'Please enter a value.',
}: { message?: string } = {}) {
  return (value: T, ctx: RefinementCtx) => {
    if (value == null) {
      ctx.addIssue({
        code: 'custom',
        message,
        fatal: true, // see https://github.com/colinhacks/zod/issues/2192#issuecomment-1812534617
      });
      return z.NEVER;
    }
    return value;
  };
}

const schema = z.object({
  firstName: z.string().nullable().transform(requiredOutput()),
  lastName: z.string().nullable().transform(requiredOutput()),
});

export default function App() {
  const form = useForm(
    formOptions.strictSchema({
      defaultValues: {
        firstName: null,
        lastName: 'Prefilled',
      },
      validators: [
        {
          run: schema,
          triggers: ['change'],
        },
      ],
      onSubmit: async ({ value }) => {
        console.log(value.firstName.toUpperCase()); // both fields should be strings at this point - REPORTED AS NULL HOWEVER - COMING FROM `defaultValues`
        console.log(value.lastName.toUpperCase()); // both fields should be strings at this point

        type ValidatedValue = z.output<typeof schema>;
        type FirstName = ValidatedValue['firstName']; // type is `string`, not `null`
        type LastName = ValidatedValue['lastName']; // type is `string`, not `null`
      },
    }),
  );

  return (
    <div>
      <h1>Standard Schema Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <div>
          {/* A type-safe field component*/}
          <form.Field
            name="firstName"
            children={(field) => {
              // Avoid hasty abstractions. Render props are great!
              return (
                <>
                  <label htmlFor={field.name}>First Name:</label>
                  <input
                    id={field.name}
                    name={field.name}
                    value={field.value ?? ''}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                </>
              );
            }}
          />
        </div>
        <div>
          <form.Field
            name="lastName"
            children={(field) => (
              <>
                <label htmlFor={field.name}>Last Name:</label>
                <input
                  id={field.name}
                  name={field.name}
                  value={field.value ?? ''}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                />
              </>
            )}
          />
        </div>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        />
      </form>
    </div>
  );
}

const rootElement = document.getElementById('root')!;

createRoot(rootElement).render(
  <React.StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      plugins={[formDevtoolsPlugin()]}
    />
  </React.StrictMode>,
);

Server side error handling

There is a library called "formstand" that separates server and client errors a bit: see this explanation. We do something internally as well (currently based on formik). Is this something TanStack Form also supports? (I believe I haven't seen it in v1.)

[LeCarbonator]

If your validator is

1. A schema
2. Runs on submit (default, does not have runOnSubmit: false)

Then you can access the output result from onSubmit by getting the schemaOutputs tuple. The tuple is ordered by validator index, so you can extract it there.

[LeCarbonator]

To clarify, typing value as the output type is NOT safe. Many schema libraries, including zod, have transform operations that can completely change the resulting object. That's why value will remain as input typing.

[donaldpipowitch]

Oh, I'd have expected to get the transformed object!

[LeCarbonator]

Well, you can specify 2 or more schemas with different transforms, so one final value wouldn't be viable.

Hopefully schemaOutputs is what you're looking for!