Wrapped base query mutating API responses - is it possible to get generated hooks to have correct typing (without manual endpoint return type annotation) ?

[robert-westenberger]

I am generating an api slice using @rtk-query/codegen-openapi . Here is one of the generated slices ( okay, its actually handwritten for the sake of this post )

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { APIResponse } from './types';

export type Post = {
  id: number;
  title: string;
  content: string;
  authorId: number;
};

export type User = {
  id: number;
  name: string;
  email: string;
};

export const generatedExampleAPI = createApi({
  reducerPath: 'example',
  baseQuery: fetchBaseQuery({ baseUrl: '/example' }),
  endpoints: (builder) => ({
    getUsers: builder.query<APIResponse<User[]>, void>({
      query: () => 'users',
    }),
    getPost: builder.query<APIResponse<Post>, number>({
      query: (id) => `posts/${id}`,
    }),
  }),
});

export const { useGetUsersQuery, useGetPostQuery } = generatedExampleAPI;

Every endpoint has the same APIResponse schema:

type APISuccessResponse<T> = {
  success: true;
  result: T;
  error?: never;
};

type APIErrorResponse = {
  success: false;
  result?: never;
  error: string;
};

export type APIResponse<T> = APISuccessResponse<T> | APIErrorResponse;

function isAPISuccessResponse<T>(
  response: APIResponse<T>
): response is APISuccessResponse<T> {
  return response.success === true;
}

function isAPIErrorResponse<T>(
  response: APIResponse<T>
): response is APIErrorResponse {
  return response.success === false;
}

export function isAPIResponse<T>(
  response: unknown
): response is APIResponse<T> {
  return (
    typeof response === 'object' &&
    response !== null &&
    (isAPISuccessResponse(response as APIResponse<T>) ||
      isAPIErrorResponse(response as APIResponse<T>))
  );
}

I want to "unwrap" every single API response before it's even cached in redux, so that when I use the generated hooks, i get back, not { success: true, result: }.

I do that by wrapping the base query.

import { fetchBaseQuery } from '@reduxjs/toolkit/query';
import type {
  BaseQueryFn,
  FetchArgs,
  FetchBaseQueryError,
} from '@reduxjs/toolkit/query';
import { isAPIResponse } from './types';

const baseQuery = fetchBaseQuery({ baseUrl: '/' });

export const baseQueryWithGlobalTransform: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  const result = await baseQuery(args, api, extraOptions);

  if (!isAPIResponse(result.data)) {
    return { error: { status: 400, data: 'FIXME: better error message' } };
  }

  if (!result.data.success) {
    return { error: { status: 400, data: result.data.error } };
  }
  return { data: result.data.result };
};

The issue I am having is that I have to manually annotate the API slice definitions to let typescript know that I am "unwrapping" the payload for every query, like this:

import type {
  DefinitionsFromApi,
  OverrideResultType,
  TagTypesFromApi,
} from '@reduxjs/toolkit/query';
import { generatedExampleAPI, Post, User } from './generatedAPISlice';

type Definitions = DefinitionsFromApi<typeof generatedExampleAPI>;

type TagTypes = TagTypesFromApi<typeof generatedExampleAPI>;

type UpdatedGetPostDefinition = OverrideResultType<
  Definitions['getPost'],
  Post
>;

type UpdatedGetUsersDefinition = OverrideResultType<
  Definitions['getUsers'],
  User[]
>;

type UpdatedDefinitions = Omit<Definitions, 'getPost' | 'getUsers'> & {
  getPost: UpdatedGetPostDefinition;
  getUsers: UpdatedGetUsersDefinition;
};

export const enhancedExampleAPI = generatedExampleAPI.enhanceEndpoints<
  TagTypes,
  UpdatedDefinitions
>({});

export const { useGetPostQuery, useGetUsersQuery } = enhancedExampleAPI;

Is there a way to do this in a more.. i don't know, "automatic" way? I realize there might not be since I have a very niche use case here. I want to avoid overriding the result type for every endpoint.

[robert-westenberger]

This is related to #4616 , but I thought this question is different enough to warrant another discussion. Let me know if this should be closed and I'll post this in #4616.

Also I struggled to come up with a good title for this post