How to extract value from API response inside base query in a type safe way?

[robert-westenberger]

Hi, all of the APIs I interact with use the APIResponse interface, found below.

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

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

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

I'd like to transform the API responses to just extract the result value on success. So if my api slice is like this

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

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

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

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

export const { useGetPostsQuery, useGetUsersQuery, useGetPostQuery } =
  exampleAPI;

Then for example the data key on the object returned by useGetPostQuery(someId) should be a Post interface on a successful request, not { success: true, result: POST }.

Doing it in transformResponse is straightforward enough

endpoints: {
    ...
    getPost: {
      transformResponse: (response: APIResponse<Post>) {
        if (!response.success) {
          throw new Error(response.error);
        }
        return response.result;
      }
    }
  }

But I would like to do it in the baseQuery, since I don't want to have to write a transformResponse for literally every endpoint definition.

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

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

export const baseQueryWithGlobalTransform: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  const result = await baseQuery(args, api, extraOptions);
  // How to return result.data.result here in a type safe way??
  return result;
};

Is it possible to return result.data.result in baseQueryWithGlobalTransform in the snippet above, in a type safe way? By type safe i mean I want typescript to know the result value has already been extracted from the response object whenever i am using a generated hook.

Here is a little dummy codebase I made for this question: https://stackblitz.com/edit/vitejs-vite-muwfxe?file=src%2FbaseQuery.ts

[markerikson]

I would assume that either your baseQueryWithGlobalTransform makes the assumption that the response is in that shape already, or uses a type guard function to check and verify the shape. Then use that same conditional logic that you showed in transformResponse.

[markerikson]

Base queries need to always return either {data} or {error}, not throw an error:

• https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#implementing-a-custom-basequery

[robert-westenberger]

Ah, something like this then?

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)) {
    if (!result.data.success) {
      return { ...result, error: result.data.error };
    }
    return { ...result, data: result.data.result };
  }
  return result;
};

I get this error

Type '(args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; } | { ...; } | { ...; }>' is not assignable to type 'BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError>'.
  Type 'Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; } | { ...; }>' is not assignable to type 'MaybePromise<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
    Type 'Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; } | { ...; }>' is not assignable to type 'PromiseLike<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = { error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; } | { ...; }, TResult2 = never>(onfulfilled?: ((value: { ...; } | ... 3 more ... | { ...; }) => TResult1 | PromiseLik...' is not assignable to type '<TResult1 = QueryReturnValue<unknown, FetchBaseQueryError, {}>, TResult2 = never>(onfulfilled?: ((value: QueryReturnValue<unknown, FetchBaseQueryError, {}>) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined) => PromiseLike<...>'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type '{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; } | { ...; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                Type '{ error: string; data?: undefined; meta?: FetchBaseQueryMeta | undefined; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                  Type '{ error: string; data?: undefined; meta?: FetchBaseQueryMeta | undefined; }' is not assignable to type '{ error?: undefined; data: unknown; meta?: {} | undefined; }'.
                    Types of property 'error' are incompatible.
                      Type 'string' is not assignable to type 'undefined'.(2322)

(If i don't spread result on the conditional returns, for example)

...
if (isAPIResponse(result.data)) {
    if (!result.data.success) {
      return { error: result.data.error };
    }
    return { data: result.data.result };
  }
...

Then typescript complains about the data key missing in the first return that returns { error: result.data.error }

Type '(args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { ...; } | { ...; }>' is not assignable to type 'BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError>'.
  Type 'Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; }>' is not assignable to type 'MaybePromise<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
    Type 'Promise<{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; }>' is not assignable to type 'PromiseLike<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = { error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; }, TResult2 = never>(onfulfilled?: ((value: { ...; } | ... 1 more ... | { ...; }) => TResult1 | PromiseLike<...>) | ... 1 more ....' is not assignable to type '<TResult1 = QueryReturnValue<unknown, FetchBaseQueryError, {}>, TResult2 = never>(onfulfilled?: ((value: QueryReturnValue<unknown, FetchBaseQueryError, {}>) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined) => PromiseLike<...>'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type '{ error: FetchBaseQueryError; data?: undefined; meta?: FetchBaseQueryMeta | undefined; } | { error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; } | { ...; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                Type '{ error: string; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                  Property 'data' is missing in type '{ error: string; }' but required in type '{ error?: undefined; data: unknown; meta?: {} | undefined; }'.(2322)

https://stackblitz.com/edit/vitejs-vite-muwfxe?file=src%2FbaseQuery.ts

[markerikson]

I think it's because return result doesn't type-match the {data} / {error} pattern. You've got three possible returns in that function, and essentially you need two.

[robert-westenberger]

Here I reduce it to two return types,

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<
  FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  const result = await baseQuery(args, api, extraOptions);

  if (isAPIResponse(result.data) && !result.data.success) {
    return { error: result.data.error };
  }

  return {
    data: isAPIResponse(result.data) ? result.data.result : result,
  };
};

Looks like typescript complains about passing a string as the error value?

Type '(args: FetchArgs, api: BaseQueryApi, extraOptions: {}) => Promise<{ error: string; data?: undefined; } | { data: unknown; error?: undefined; }>' is not assignable to type 'BaseQueryFn<FetchArgs, unknown, FetchBaseQueryError>'.
  Type 'Promise<{ error: string; data?: undefined; } | { data: unknown; error?: undefined; }>' is not assignable to type 'MaybePromise<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
    Type 'Promise<{ error: string; data?: undefined; } | { data: unknown; error?: undefined; }>' is not assignable to type 'PromiseLike<QueryReturnValue<unknown, FetchBaseQueryError, {}>>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = { error: string; data?: undefined; } | { data: unknown; error?: undefined; }, TResult2 = never>(onfulfilled?: ((value: { error: string; data?: undefined; } | { data: unknown; error?: undefined; }) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLi...' is not assignable to type '<TResult1 = QueryReturnValue<unknown, FetchBaseQueryError, {}>, TResult2 = never>(onfulfilled?: ((value: QueryReturnValue<unknown, FetchBaseQueryError, {}>) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined) => PromiseLike<...>'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type '{ error: string; data?: undefined; } | { data: unknown; error?: undefined; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                Type '{ error: string; data?: undefined; }' is not assignable to type 'QueryReturnValue<unknown, FetchBaseQueryError, {}>'.
                  Type '{ error: string; data?: undefined; }' is not assignable to type '{ error?: undefined; data: unknown; meta?: {} | undefined; }'.
                    Types of property 'error' are incompatible.
                      Type 'string' is not assignable to type 'undefined'.(2322)

[robert-westenberger]

I think I have a path forward. Here is my current iteration.

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)) {
    if (!result.data.success) {
      return { error: { status: 400, data: result.data.error } };
    }
    return { data: result.data.result };
  }

  return result.error ? { error: result.error } : { data: result.data };
};

It looks like i have to have a particular structure for the error object.
I can play around with this for now. Thank you for your help.