CODEWITHSUNDEEP
reactjstypescriptrtk-query
Kostya GL
Kostya GL

Reputation: 142

RTK Query UseLazyQuery trigger: how to get the correct type?

I need to get correct typing for trigger, that I'm passing to the child component, cannot find how to type it.

...      
const [trigger] = useLazyGetQuery();
...
<ChildComponent trigger={trigger} />
...

Child component where I need to type somehow RTK query trigger except any:

export const ChildComponent = ({ trigger }: { trigger: any }) => {...}

Upvotes: 3

Views: 1599

Answers (3)

nachtigall
nachtigall

Reputation: 2497

Extending from sibling https://stackoverflow.com/a/78178220/1129950

In newer versions of RTK-Query LazyGetTriggerType is not exported anymore. Instead TypedLazyQueryTrigger needs to be used with:

import { TypedLazyQueryTrigger } from '@reduxjs/toolkit/query/react';

export type LazyGetTriggerType<T, U> = TypedLazyQueryTrigger<
  U, // Response type
  T, // Request parameters type
  BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError>
>;

Upvotes: 0

jet_choong
jet_choong

Reputation: 433

Just extending from OP's answer, to use this generically you can define request param type and response type as generic types <T, U>, so that it can be shared within your project:

export type LazyGetTriggerType<T, U> = LazyQueryTrigger<
  QueryDefinition<
    T,                // Request parameters type
    BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, object, FetchBaseQueryMeta>,
    never,
    U,                // Response type
    "api"             // Your reducerPath
  >
>;

Upvotes: 2

Kostya GL
Kostya GL

Reputation: 142

I found correct type:

import { LazyQueryTrigger } from "@reduxjs/toolkit/dist/query/react/buildHooks";
import {
  BaseQueryFn,
  FetchArgs,
  FetchBaseQueryError,
  FetchBaseQueryMeta,
  QueryDefinition,
} from "@reduxjs/toolkit/query";
import { IDemoRequest } from "../../../../../../../modules/Demo/apis/interfaces/IDemoRequest";

export type LazyGetTriggerType = LazyQueryTrigger<
  QueryDefinition<
    IDemoRequest,            // Request parameters type
    BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, object, FetchBaseQueryMeta>,
    never,
    number[],                // Response type
    "api"                    // Your reducerPath
  >
>;

Change any to LazyGetTriggerType

export const ChildComponent = ({ trigger }: { trigger: LazyGetTriggerType }) => {...}

Upvotes: 3

Related Questions