Implementing RTKQuery queryFn in TypeScript: A comprehensive guide

Question

Implementing RTKQuery queryFn in TypeScript: A comprehensive guide

Important update: The issue is now resolved in RTKQuery v2 after converting to TypeScript. See the original question below.

Brief summary

I am encountering an error while trying to compile the TypeScript code snippet below. Tsc is indicating that the return type from the queryFn function is not satisfactory. Could you please guide me on what might be wrong or missing?

The code snippet

import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query/fetchBaseQuery';
import { baseApi } from '../../../api/baseApi';
import { RootState } from '../../../redux/store';
import { UserResponse } from './userApiTypes';

export const extendedApi = baseApi.injectEndpoints({
    endpoints: build => ({
        getUser: build.query<UserResponse, void>({
            queryFn: async (arg, api, extraOptions, baseQuery) => {
                const state = api.getState() as RootState;

                if (!state.auth.loginToken && !state.auth.refreshToken)
                    return { error: { error: `UNAUTHORIZED`, status: `CUSTOM_ERROR` } as FetchBaseQueryError };

                return await baseQuery(`/user/me`);
            },
        }),
    }),
});

export const { useGetUserQuery, useLazyGetUserQuery } = extendedApi;

The error message

Type '(arg: void, api: BaseQueryApi, extraOptions: any, baseQuery: (arg: string | FetchArgs) => Promise<QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>>) => Promise<...>' is not assignable to type '(arg: void, api: BaseQueryApi, extraOptions: any, baseQuery: (arg: string | FetchArgs) => Promise<QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>>) => MaybePromise<...>'.
  Type 'Promise<QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>>' is not assignable to type 'MaybePromise<QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>>'.
    Type 'Promise<QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>>' is not assignable to type 'PromiseLike<QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>, TResult2 = never>(onfulfilled?: ((value: QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ......' is not assignable to type '<TResult1 = QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>, TResult2 = never>(onfulfilled?: ((value: QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined...'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type 'QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>' is not assignable to type 'QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>'.
                Type '{ error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; }' is not assignable to type 'QueryReturnValue<UserResponse, FetchBaseQueryError, unknown>'.
                  Type '{ error?: undefined; data: unknown; meta?: FetchBaseQueryMeta | undefined; }' is not assignable to type '{ error?: undefined; data: UserResponse; meta?: unknown; }'.
                    Types of property 'data' are incompatible.
                      Type 'unknown' is not assignable to type 'UserResponse'.ts(2322)
endpointDefinitions.d.ts(37, 5): The expected type comes from property 'queryFn' which is declared here on type 'Omit<EndpointDefinitionWithQuery<void, (args: string | FetchArgs, api: BaseQueryApi, extraOptions: any) => Promise<QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>>, UserResponse> & { ...; } & { ...; } & QueryExtraOptions<...>, "type"> | Omit<...>'

Temporary fix

Upon reviewing various online resources, I discovered that the code compiles successfully when I remove types from build.query as shown below:

getUser: build.query({ // changed here
            queryFn: async (arg, api, extraOptions, baseQuery) => {
                const state = api.getState() as RootState;

                if (!state.auth.loginToken && !state.auth.refreshToken)
                    return { error: { error: `UNAUTHORIZED`, status: `CUSTOM_ERROR` } as FetchBaseQueryError };

                return await baseQuery(`/user/me`);
            },
        }),

However, this workaround sacrifices strong typing throughout my code, making it a somewhat controversial solution.

typescript react-redux redux-toolkit rtk-query

Answer 1

Answer №1

After some deliberation, I landed on this particular piece of code but I'm not entirely convinced if it's the most efficient approach. The code seems to extend beyond the initial baseQuery call just to meet the compiler's requirements:

import { baseApi } from '../../../api/baseApi';
import { BaseResponse } from '../../../api/baseApiTypes';
import { RootState } from '../../../redux/store';
import { UserResponse } from './userApiTypes';

export const extendedApi = baseApi.injectEndpoints({
  endpoints: build => ({
    getUser: build.query<UserResponse, void>({
      queryFn: async (arg, api, extraOptions, baseQuery) => {
        const state = api.getState() as RootState;

        if (!state.auth.tokens)
          return { error: { error: `UNAUTHORIZED`, status: `CUSTOM_ERROR` } };

        const result = await baseQuery(`/user/me`);

        if (result.error)
          return { error: result.error };

        const baseResponseWithUser = result.data as BaseResponse<UserResponse>;

        if (!baseResponseWithUser.data)
          return { error: { error: `UNKNOWN_ERROR`, status: `CUSTOM_ERROR` } };

        return { data: baseResponseWithUser.data };
      },
    }),
  }),
});

export const { useGetUserQuery, useLazyGetUserQuery } = extendedApi;

Answer 2

After some deliberation, I landed on this particular piece of code but I'm not entirely convinced if it's the most efficient approach. The code seems to extend beyond the initial baseQuery call just to meet the compiler's requirements:

import { baseApi } from '../../../api/baseApi';
import { BaseResponse } from '../../../api/baseApiTypes';
import { RootState } from '../../../redux/store';
import { UserResponse } from './userApiTypes';

export const extendedApi = baseApi.injectEndpoints({
  endpoints: build => ({
    getUser: build.query<UserResponse, void>({
      queryFn: async (arg, api, extraOptions, baseQuery) => {
        const state = api.getState() as RootState;

        if (!state.auth.tokens)
          return { error: { error: `UNAUTHORIZED`, status: `CUSTOM_ERROR` } };

        const result = await baseQuery(`/user/me`);

        if (result.error)
          return { error: result.error };

        const baseResponseWithUser = result.data as BaseResponse<UserResponse>;

        if (!baseResponseWithUser.data)
          return { error: { error: `UNKNOWN_ERROR`, status: `CUSTOM_ERROR` } };

        return { data: baseResponseWithUser.data };
      },
    }),
  }),
});

export const { useGetUserQuery, useLazyGetUserQuery } = extendedApi;

Answer 3

Answer №2

By following the guidelines from https://redux-toolkit.js.org/rtk-query/usage-with-typescript#typing-a-basequery, I was able to define a custom type called QueryReturnValue.

export type QueryReturnValue<T = unknown, E = unknown, M = unknown> =
| {
  error: E
  data?: undefined
  meta?: M
}
| {
  error?: undefined
  data: T
  meta?: M
}

To handle compilation errors in my queryFn, I utilized the type coercion method as shown below:

const result = await baseQuery(`/user/me`);
return result as QueryReturnValue<UserResponse, unknown, unknown>;

To simplify this process, I created a utility function to streamline type declarations:

// Utility function accessible to all API slices
export function someHelperForTS<T>(result: QueryReturnValue<unknown, unknown, unknown>) {
    return result as QueryReturnValue<T, unknown, unknown>;
}

// Implementation within queryFn
const result = await baseQuery(`/user/me`);
return someHelperForTS<UserResponse>(result);

Although this approach reduces verbosity, it requires declaring the same response type in both build.query and someHelperForTS, which can be cumbersome.

Answer 4

By following the guidelines from https://redux-toolkit.js.org/rtk-query/usage-with-typescript#typing-a-basequery, I was able to define a custom type called QueryReturnValue.

export type QueryReturnValue<T = unknown, E = unknown, M = unknown> =
| {
  error: E
  data?: undefined
  meta?: M
}
| {
  error?: undefined
  data: T
  meta?: M
}

To handle compilation errors in my queryFn, I utilized the type coercion method as shown below:

const result = await baseQuery(`/user/me`);
return result as QueryReturnValue<UserResponse, unknown, unknown>;

To simplify this process, I created a utility function to streamline type declarations:

// Utility function accessible to all API slices
export function someHelperForTS<T>(result: QueryReturnValue<unknown, unknown, unknown>) {
    return result as QueryReturnValue<T, unknown, unknown>;
}

// Implementation within queryFn
const result = await baseQuery(`/user/me`);
return someHelperForTS<UserResponse>(result);

Although this approach reduces verbosity, it requires declaring the same response type in both build.query and someHelperForTS, which can be cumbersome.

Implementing RTKQuery queryFn in TypeScript: A comprehensive guide

Important update: The issue is now resolved in RTKQuery v2 after converting to TypeScript. See the original question below.

Brief summary

The code snippet

The error message

Temporary fix

Answer №1

Answer №2

Similar questions

Is it possible to generate a Date object from a predetermined string in typescript?

What is the best method for dividing a user interface into several arrays of keys, each grouped by type?

Error: The middleware function is invalid and cannot be executed

Vercel seems to be having trouble detecting TypeScript or the "@types/react" package when deploying a Next.js project

I am seeking advice on how to create an extension for a generic class in TypeScript specifically as a getter

Is there a way to change a typescript enum value into a string format?

Dealing with Unexpected Timeout Errors and Memory Leaks in Express/Typescript Using Jest, Supertest, and TypeORM

Implement a default dropdown menu that displays the current month using Angular and TypeScript

Using *ngFor in TypeScript code

RxJS - Only emit if another source does not emit within a specified time frame

Guide on showing a component exclusively for iPads with React and TypeScript

Unable to locate the module '@vitejs/plugin-react' or its associated type

Adjust the component suppliers based on the @input

Using @material-ui/core/useScrollTrigger in a Next.js application: a step-by-step guide

Adjusting the dimensions of the cropper for optimal image cropping

What is the process for converting BitmapData from Flash into HTML canvas?

Creating dynamic class fields when ngOnInit() is called in Angular

Require that the parent FormGroup is marked as invalid unless all nested FormGroups are deemed valid - Implementing a custom

Setting up Next Js to display images from external domains

The closeOnClickOutside feature seems to be malfunctioning in the angular-2-dropdown-multiselect plugin