Use zod with query and mutation

[User6531]

Hello everyone,

I would like to know how to perform type checking on the fly using zod.
Specifically, I want to check if the response matches my type and if not, throw an error.

This is how I do it:

import { TBuilder } from "store/services/main/main.types";
import { usersBaseUrl } from "store/services/main/main.constants";
import { z } from "zod";

const UserSchema = z.object({
  isRegistered: z.boolean(),
  customerId: z.string().nullable(),
  requiredKey: z.string({
    errorMap: () => ({ message: "test" }),
  }),
});

type TUser = z.infer<typeof UserSchema>;

const checkUserEndpoint = (builder: TBuilder) =>
  builder.query<TUser, void>({
    query: () => `${usersBaseUrl}users/check-user`,

    transformResponse: (response: TUser) => {
      UserSchema.parse(response);

      return response;
    },
  });

export default checkUserEndpoint;

Is it the best way?

Note that I am aware of the queryFn option, but I would prefer a simpler method.

[User6531]

@phryneas. I was wondering if you would be willing to assist me.

[phryneas]

Pretty much. You could also write a baseQuery wrapper for zod - something roughly like this untested pseudocode:

const zodBaseQueryWrapper: BaseQueryEnhancer<
  unknown,
  { argumentSchema?: ZodSchema, dataSchema?: ZodSchema }
> = (baseQuery) => async (args, api, extraOptions) => {
  if (extraOptions.argumentSchema) {
    try {
      extraOptions.argumentSchema.parse(args)
    } catch (error) {
      return { error }
    }
  }
  const returnValue = baseQuery(args, api, extraOptions)
  if (extraOptions.dataSchema && 'data' in returnValue) {
    try {
      extraOptions.dataSchema.parse(returnValue.data)
    } catch (error) {
      return { error }
    }
  }
  return returnValue
}

[User6531]

Thank you so much, this is super useful!

[hhsl]

This looks really nice!

But unfortunately I can't fix a nasty type error coming from the return type of await baseQuery(.... I can make it work by casting it to any which seems weird 😄 . Simple example:

const zodBaseQueryWrapper: BaseQueryEnhancer<unknown, { schema?: ZodSchema }> =
	(baseQuery) => async (args, api, extraOptions) => {
		const result = await baseQuery(args, api, extraOptions);
		if (extraOptions.schema) {
			try {
				extraOptions.schema.parse(result);
			} catch (error) {
				return { error };
			}
		}

		return result as MaybePromise<QueryReturnValue<any, any, any>>;
	};

last part of TS Error:

Type '{ error?: undefined; data: unknown; meta?: {} | undefined; }' is not assignable to type '{ error?: undefined; data: BaseQueryResult<BaseQuery>; meta?: NonNullable<BaseQueryMeta<BaseQuery>> | undefined; }'.
                    Types of property 'data' are incompatible.
                      Type 'unknown' is not assignable to type 'BaseQueryResult<BaseQuery>'.

[User6531]

Take a look at my implementation.
It works fine.

import { ZodSchema } from "zod";
import type {
  BaseQueryFn,
  FetchArgs,
  FetchBaseQueryError,
  FetchBaseQueryMeta,
} from "@reduxjs/toolkit/query/react";

type TBaseQuery = BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError,
  { dataSchema?: ZodSchema },
  FetchBaseQueryMeta
>;

/**
 * HOF that wraps a base query function with additional functionality for data validation using zod
 *
 * @param baseQuery The base query function to be wrapped.
 * @returns A modified version of the baseQuery with added data validation.
 */
const baseQueryWithZodValidation: (baseQuery: TBaseQuery) => TBaseQuery =
  (baseQuery: TBaseQuery) => async (args, api, extraOptions) => {
    // Call the original baseQuery function with the provided arguments
    const returnValue = await baseQuery(args, api, extraOptions);

    // Retrieve the data schema from the extraOptions object
    const zodSchema = extraOptions?.dataSchema;

    const { data } = returnValue;

    // Check if both 'data' and 'zodSchema' are defined
    if (data && zodSchema) {
      // throws Validation error if the 'data' fails validation.
      try {
        zodSchema.parse(data);
      } catch (error) {
        throw error;
      }
    }

    // Return the original returnValue object
    return returnValue;
  };

[Lantianyou]

No line number but I think it should be zodSchema.parse(data), right?