79135263

Date: 2024-10-28 22:28:08
Score: 0.5
Natty:
Report link

Maybee is too late, but this is working fine for me:

https://github.com/SantiTabbach/pkf/blob/main/react/RTK_QUERY_WRAPPERS.md

import {
    BaseQueryFn,
    MutationDefinition,
    QueryArgFrom,
    QueryDefinition,
} from '@reduxjs/toolkit/query';
import {
    UseMutation,
    UseQuery,
} from '@reduxjs/toolkit/dist/query/react/buildHooks';
import { MaybePromise } from '@reduxjs/toolkit/dist/query/tsHelpers';

/**
 * BaseOptions: Define optional callbacks for handling
 * success, error, and loading states for both mutations and queries.
 *
 * @template ResponseType - The expected type of the API response.
 * @template S - The type of the error state.
 * @template T - The type of the success state.
 *
 * @property {function} [onSuccess] - A callback executed on a successful response.
 * @property {function} [onError] - A callback executed on an error.
 * @property {boolean} [showLoader] - Whether to display a loading spinner (default: true).
 */
interface BaseOptions<ResponseType, S, T> {
    onSuccess?: (response: ResponseType) => MaybePromise<T>;
    onError?: (error: unknown) => MaybePromise<S>;
    showLoader?: boolean;
}

// Mutation handler types

/**
 * MutationArgs: Defines the arguments for mutation functions.
 *
 * @template U - The mutation argument type.
 * @template V - BaseQueryFn from Redux Toolkit for managing base queries.
 * @template X - The cache key type for the mutation.
 * @template W - The response type for the mutation.
 */
export type MutationArgs<
    U,
    V extends BaseQueryFn,
    X extends string,
    W
> = QueryArgFrom<MutationDefinition<U, V, X, W>>;

/**
 * UseMutationHandlerParams: Defines the parameters for the mutation handler hook.
 *
 * @template R - Type of the 'finally' callback return.
 * @template S - Type of the 'onError' callback return.
 * @template T - Type of the 'onSuccess' callback return.
 * @template U - The mutation argument type.
 * @template V - BaseQueryFn from Redux Toolkit for managing base queries.
 * @template W - The response type for the mutation.
 * @template X - The cache key type for the mutation.
 *
 * @property {UseMutation} mutation - The mutation hook from Redux Toolkit.
 * @property {object} [options] - Optional callbacks for success, error, and finally.
 */
export interface UseMutationHandlerParams<
    R,
    S,
    T,
    U,
    V extends BaseQueryFn,
    W,
    X extends string = string
> {
    mutation: UseMutation<MutationDefinition<U, V, X, W>>;
    options?: BaseOptions<W, S, T> & {
        onFinally?: (args?: unknown) => MaybePromise<R>;
    };
}

// Query handler types

/**
 * QueryArgs: Defines the arguments for query functions.
 *
 * @template U - The query argument type.
 * @template V - BaseQueryFn from Redux Toolkit for managing base queries.
 * @template W - The response type for the query.
 * @template X - The cache key type for the query.
 */
export type QueryArgs<
    U,
    V extends BaseQueryFn,
    W,
    X extends string = string
> = QueryArgFrom<QueryDefinition<U, V, X, W>>;

/**
 * UseQueryHandlerParams: Defines the parameters for the query handler hook.
 *
 * @template S - Type of the 'onError' callback return.
 * @template T - Type of the 'onSuccess' callback return.
 * @template U - The query argument type.
 * @template V - BaseQueryFn from Redux Toolkit for managing base queries.
 * @template W - The response type for the query.
 * @template X - The cache key type for the query.
 *
 * @property {UseQuery} query - The query hook from Redux Toolkit.
 * @property {object} [options] - Optional callbacks for success, error.
 * @property {object} [extraOptions] - Extra options for query.
 */
export interface UseQueryHandlerParams<
    S,
    T,
    U,
    V extends BaseQueryFn,
    W,
    X extends string = string
> {
    query: UseQuery<QueryDefinition<U, V, X, W>>;
    options?: BaseOptions<W, S, T>;
    queryArgs?: QueryArgs<U, V, W, X>;
    extraOptions?: QueryDefinition<U, V, X, W>['extraOptions'];
}
Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Santi Tabbach