-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
Hello,
I stumbled upon this issue while implementing RTK Query at my workplace. It seems like the return type of UseQuery hooks when extracting the type results in a type that is different from the result of the hook when invoking it.
Example
Given a regular setup like this:
baseApi
export interface IBaseApiEndpoints extends EndpointDefinitions {
[key: string]: TBaseApiEndpoint<unknown, string, unknown>;
}
export const baseApi = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: getApiUrl(),
}),
tagTypes,
endpoints: () => ({}),
});
domainSpecificApi
const domainSpecificApi = baseApi.injectEndpoints({
endpoints: build => ({
fetchMyData: build.query<TSpecificReturnType, IArgs>({
queryfn: (args) => someApiCall(args),
providesTags: (_, __, params) => [{type: 'SomeTestTag', id: params.id}]
})
})
})
export const {
useFetchMyDataQuery
} = domainSpecificApi
given the above setup (hope this is understandable)
ReturnType<typeof useFetchMyDataQuery>
does not result in the same type as this object receives.
const data = useFetchMyDataQuery(param)
.
The first type results in a object with a single key refetch
while the last object has all the fields defined in https://redux-toolkit.js.org/rtk-query/usage/queries#frequently-used-query-hook-return-values
Question
What is the preferred way to define a query hook result in a interface? In my current setup the goal is to get the result of a RTK hook and pass it as a argument to another function, preferably typed.
Versions
"typescript": "4.5.4"
"@reduxjs/toolkit": "1.7.1"
tsconfig
{
"compilerOptions": {
"allowJs": false,
"target": "ESNext",
"moduleResolution": "node",
"noEmit": true,
"strict": false,
"esModuleInterop": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"module": "esnext",
"jsx": "preserve",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
},
}