Determining the return type for useActionData (validationErrors or actual data)

[ryanwoodcox]

When defining an action that can return either a validationError(result.error) or a json(result.data), how should a developer go about determining which type is returned from useActionData<typeof action>() ?

[airjp73]

Could you give an example of what you're trying to do? I'd expect the return type to be a union of TypeReturnedFromErrorCase | TypeReturnedFromSuccessCase, but I haven't had a chance to give the new type inference a try yet.

[ryanwoodcox]

I am currently just exploring the functionality and am curious how you'd go about engaging with this return type when its not clear if its in the shape of the error case or the success case.

Here is a simple component:

import type { ActionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';

import { useActionData, useCatch } from '@remix-run/react';

import { withZod } from '@remix-validated-form/with-zod';
import { useField, useIsSubmitting, ValidatedForm, validationError } from 'remix-validated-form';
import { z } from 'zod';
import { zfd } from 'zod-form-data';

const ActionSchema = zfd.formData({
  test: zfd.numeric(z.number().min(0, { message: 'Cannot be less than 0' })),
});

const validator = withZod(ActionSchema);

const MyInput = ({ name, label }: { name: string; label: string }) => {
  const { error, getInputProps } = useField(name);
  console.log(getInputProps());

  return (
    <>
      <label>{label}:</label>
      <input {...getInputProps()} min="0" type="number" />
      <div>{error && <span>{error}</span>}</div>
    </>
  );
};

const MySubmitButton = () => {
  const isSubmitting = useIsSubmitting();

  return (
    <button disabled={isSubmitting} type="submit">
      {isSubmitting ? ' Submitting' : 'Submit'}
    </button>
  );
};

export const action = async ({ request, params }: ActionArgs) => {
  const formData = await request.formData();
  const result = await validator.validate(formData);

  if (result.error) {
    return validationError(result.error);
  }

  return json(result.data);
};

const TestPage = () => {
  const actionData = useActionData<typeof action>();

  console.log(actionData);

  return (
    <div>
      <ValidatedForm defaultValues={{ test: 0 }} method="post" noValidate validator={validator}>
        <MyInput label="Test:" name="test" />
        {actionData && (
          <p>
            Action Data is: <pre>{JSON.stringify(actionData)}</pre>
          </p>
        )}
        <MySubmitButton />
      </ValidatedForm>
    </div>
  );
};

export function ErrorBoundary({ error }: { error: Error }) {
  console.error(error);

  return <div>An unexpected error occurred: {error.message}</div>;
}

export function CatchBoundary() {
  const caught = useCatch();

  if (caught.status === 404) {
    return <p>Test data not found</p>;
  }

  throw new Error(`Unexpected caught response with status: ${caught.status}`);
}

export default TestPage;

[bcinman]

Struggling with the same issue myself. We have an action that either returns a validationError or a valid json response. But we're unable to discriminate the union on the client to do something based on if the json response is valid.

export const action = async ({ request }: DataFunctionArgs) => {
  const data = await validator.validate(await request.formData());
  if (data.error) return validationError(data.error);

  const thing = await createThing(data.data);
  return typedjson({ thing });
};

// in the component
const actionData = useTypedActionData<typeof action>();
useEffect(() => {
  if (actionData?.thing) {
  // Property 'thing' does not exist on type 'TypedResponse<ValidationErrorResponseData> | TypedJsonResponse<{ thing: Thing; }>'.
  //    Property 'thing' does not exist on type 'TypedResponse<ValidationErrorResponseData>'.ts(2339) 
    doSomethingWithSuccessResponse()  
  }
}, [actionData]);

@ryanwoodcox We're you able to find a workaround?

[ryanwoodcox]

Some initial thoughts I had were writing a type predicate checking for a known field on the ValidationErrorResponseData type: fieldErrors.

Something like

export const isValidationErrorResponseData = (data: any): data is ValidationErrorResponseData =>
  !!data && 'fieldErrors' in data;

I'm curious if you came up with anything else or if @airjp73 has had any thoughts since posting this back in early August.

[airjp73]

This solution looks fine to me. It might be worth adding a isValidationError helper to the library to make this easier, and maybe we could add a discriminant to the error response.

[bcinman]

I like it. Simple solution and does the job.

[ryanwoodcox]

@airjp73 I'd love to see a discriminant added to the error response in the next update!