Wrap generated useQuery with custom hook and return the correct typescript types

[bryanprimus]

The way I currently do this is to put any in the UseQuery<any> generic

const useCustomQuery = (useQuery: UseQuery<any>) => {
    const { data } = useQuery()
    return data
}

// below imported hook is the generated one by rtk query where it already has proper types
import { usePostsQuery } from "@/services"

const App = () => {
  // data below will not be typed correctly
   const data = useCustomQuery(usePostsQuery)
}

I understand typescript need to read the types of useQuery param passed using generic

then i tried this

const useCustomQuery = <T>(useQuery: UseQuery<T>) => {
    const { data } = useQuery()
    return data
}

and it will not work since based on the rtk types T need to satisfy types like this

D extends QueryDefinition<any, any, any, any>

i know it needs to satisfy that by going to the place where the types are defined (go to type definition in vscode). the more I look into the types, I still couldn't find a way how to satisfy that type

Am I using the wrong types? is there a simple solution for what I am trying to achieve?

[xkomiks]

Are there any successes?

[bryanprimus]

No luck unfortunately 🥲

[EskiMojo14]

Have you looked into utilising the TypedUseQueryHookResult helper type(s)? It won't get you all the way, but it'll likely be a good start.

[xkomiks]

Figured it out myself

import type { BaseQueryFn, QueryDefinition } from '@reduxjs/toolkit/query';
import type { UseQuery } from '@reduxjs/toolkit/dist/query/react/buildHooks';

type UseFetch<
  QueryArg,
  BaseQuery extends BaseQueryFn,
  TagTypes extends string,
  ResultType,
  ReducerPath extends string = string
> = UseQuery<
  QueryDefinition<
    QueryArg,
    BaseQuery,
    TagTypes,
    ResultType,
    ReducerPath
  >
>

const useYouQueryWrapper= <QueryArg, BaseQuery extends BaseQueryFn, TagTypes extends string, ResultType, ReducerPath extends string = string>(
  useQueryHook: UseFetch<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
) => {
  ...
}