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?