RTK Query: How to add type-safe runtime validation for server responses without writing code on a per-endpoint basis?

[jimmycuadra]

Given the following code:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

interface Post {
  id: string;
  title: string;
  body: string;
}

export const postsApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.example.com/",
  }),
  endpoints: (build) => ({
    getPost: build.query<Post, string>({
      query: (id) => `posts/${id}`,
    }),
  }),
});

RTK Query doesn't do anything to prove that the server actually returns a Post at runtime. I could also change the first type argument to build.query from Post to anything else, and TypeScript wouldn't report an error. If I want to add runtime validation to ensure that the data that comes from the server really is a post, it's not clear from RTK Query's documentation how to achieve this.

What I'd like is something like this (using zod for runtime validation inside transformResponse):

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { z } from "zod";

const Post = z.object({
  id: z.string(),
  title: z.string(),
  body: z.string(),
});

type Post = z.infer<typeof Post>;

export const postsApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.example.com/",
  }),
  endpoints: (build) => ({
    getPost: build.query<Post, string>({
      query: (id) => `posts/${id}`,
      transformResponse: (response, _meta, _arg) => {
        return Post.parse(response);
      },
    }),
  }),
});

except that I don't want to have to specify transformResponse on every endpoint—I want all endpoints to do exactly the same thing, just substituting the runtime type that the server response is parsed into based on whatever the endpoint is supposed to return (Post in this example).

From searching around, I found a few clues in similar discussions:

• Type safety in RTK query endpoints, where the suggestion given was to use queryFn.
• Anyone use RTK Query with AJV to validate response shape?, where both queryFn and responseHandler are given as possibilities.
• How to validate RTK Query responses properly, where the suggestion given was to use transformResponse. This is what I used in the example above.
• This Twitter thread, where transformResponse is again suggested as the place to put validation.

However, all of these still require extra setup on a per-endpoint basis. Is there a way to customize the base query function to generalize this pattern for all endpoints? I imagine it would require an additional argument (or perhaps both runtime and type arguments, since Post is both a runtime value and a compile-time type in my example) to specify which object should be used for validation for a particular endpoint.

[phryneas]

Your request reads to me as "how to get runtime validation with only types" - and that cannot be possible.

But of course you can write yourself a wrapper to make it nicer to read:

export type TypeOf<T extends ZodType<any, any, any>> = T["_output"];

function validate<T extends ZodType<any, any, any>>(schema: T): TypeOf<T> {
  return response => schema.parse(response)
}

// in your endpoint

  endpoints: (build) => ({
    getPost: build.query<Post, string>({
      query: (id) => `posts/${id}`,
      transformResponse: validate(Post)
    }),
  }),

[jimmycuadra]

Thanks for the reply! That gets pretty close to my ideal result, though I had to modify the annotated return type of validate in your example code to get it to compile:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { z, type ZodType } from "zod";

type TypeOf<T extends ZodType<any, any, any>> = T["_output"];

function validate<T extends ZodType<any, any, any>>(
  schema: T
): (response: unknown, meta: unknown, arg: unknown) => TypeOf<T> {
  return (response) => schema.parse(response);
}

const Post = z.object({
  id: z.string(),
  title: z.string(),
  body: z.string(),
});

type Post = z.infer<typeof Post>;

export const postsApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.example.com/",
  }),
  endpoints: (build) => ({
    // Changing the `Post` type on the next line to something
    // else will cause a compiler error now
    getPost: build.query<Post, string>({
      query: (id) => `posts/${id}`,
      // Likewise, changing the `Post` runtime value on the next
      // line to something else will cause a compiler error now
      transformResponse: validate(Post),
    }),
  }),
});

However, with this construction, I still have to pass a validation function in on a per-endpoint basis, even though the logic of validation should be the same for all endpoints—it's only the schema object used to do the validation that changes per endpoint. Furthermore, if I simply remove transformResponse, it still compiles, so the type system is not helping me enforce that my query logic includes runtime validation.

I'd like to be able to do something like this:

export const postsApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.example.com/",
    validate: validate,
  }),
  endpoints: (build) => ({
    getPost: build.query<Post, string>({
      query: (id) => `posts/${id}`,
      validationSchema: Post,
    }),
  }),
});

The key difference being that the validation function is defined generically, and runs automatically as part of the base query function's logic, so all I'd need to do on a per-endpoint basis is specify the schema object. Ideally validationSchema would be a required field in order to create the endpoint, so that it would be impossible to define an endpoint that did not include runtime validation.

[phryneas]

That could not possibly be typed to work correctly with multiple different validation libraries and at that point we would have to bind ourselves to one validation library, which we do not want to do. I'm sorry, but the method I suggested is probably the closest you will get.

[jimmycuadra]

Not even with a custom base query function?

[phryneas]

On runtime level yes, on type level no. TS can map over generic functions, but not apply anything to those generics.

[jimmycuadra]

Gotcha. Thank you for the help!