Custom hook in Typescript - Generics and Type

[ankursehdev]

I am trying to write a custom hook that can download data from different endpoints and the Query Function will be passed when we call this hook, in typescript what would be the correct way of doing this?

All the examples I find define Query function within the hook or have it somewhere and not passed to the hook.

Hook Signature:

const { status, data, error, isFetching } = useGetData( KEY, queryFn );

Custom Hook:

import { useQuery, QueryKey, QueryFunction } from "react-query";

//CAN I IMPORT AND USE TYPES LIKE THIS?

function useGetData(key: QueryKey, queryFunc: QueryFunction) {
  return useQuery(key, queryFunc)
}

export default useGetData;

Is this the correct way of defining types for key and query function? Can I import types from react-query and use them like this?

The benefit of this approach
I can specify any function to the hook which can return the data to me, making my hook agnostic to queryFunction.

[TkDodo]

in your example, useGetData is exactly the same as useQuery, so I don't see any advantages to this approach:

const { status, data, error, isFetching } = useGetData( KEY, queryFn );
const { status, data, error, isFetching } = useQuery( KEY, queryFn );

if you want to create low level abstractions, you have to deal with lots of generics (useQuery takes 4 generics). You can read more about them in my blog: https://tkdodo.eu/blog/react-query-and-type-script#the-four-generics

I also have a twitter thread on the topic if you really want to do something generically in your low-level wrapper: https://twitter.com/TkDodo/status/1491451513264574501

[ankursehdev]

Yes, currently wrapper is not doing much but the plan is to expand on that and your tweet is exactly what I was looking for. There could be use cases in the app where I need to add header/tokens or auth stuff but this is great, Thanks.