reactjs - Hur validerar man API-svar i RTK Query med Zod-schema?

Jag vill validera API-svaret som jag får från ett REST-API med hjälp av ett Zod-schema. Till exempel har jag detta användarschema och detta API

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


const userSchema = z.object({
  id: z.string(),
  name: z.string(),
  age: z.number(),
});

type User = z.infer<typeof userSchema>;


export const userAPI = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://some-api/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<user, string>({
      query: (id) => `user/${id}`,
    }),
  }),
})

Jag vill validera API-svaret mot userSchema med hjälp av Zod. Jag är dock osäker på om jag ska använda funktionen parse eller safeParse som tillhandahålls av Zod.

Kan du vänligen förtydliga var i min kod jag bör utföra svarvalideringen, och om jag bör använda parse eller safeParse för detta scenario?

Svar #1

Du kan bara använda transformResponse som tillhandahålls av Redux Toolkit Query för att validera svaret med hjälp av userSchema. Om svaret inte matchar schemat kommer ett fel att utlösas.

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

const userSchema = z.object({
  id: z.string(),
  name: z.string(),
  age: z.number(),
});

type User = z.infer<typeof userSchema>;

export const userAPI = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://some-api/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<User, string>({
      query: (id) => `user/${id}`,
      transformResponse: (response) => {
        userSchema.parse(response);
        return response;
      },
    }),
  }),
});

Du kan också skriva en wrapper för baseQuery med zod