How to set up the correct type between react query and axios?

[kaisiant]

I am using axios to request the api and the react query infers the type but it is not exactly what I want. So I set up the custom hook like below:

My custom hook

const fetchTrending = ({ pageParam = 1 }) => {
  return Axios.get(
    '/stock/trending?page=' +
      `${_.isNaN(pageParam) ? 1 : pageParam}`
  )
}

const useTrending = () => {
  return useInfiniteQuery<any, any, IListing<ITrending>>(
    'trending',
    fetchTrending,
    {
      getNextPageParam: (lastPage, pages) => {
        const nextVlaue = lastPage.last
          ? false
          : lastPage.number + 2
        return nextVlaue
      },
    }
  )
}

How I using it

 const {
    data,
    fetchNextPage,
    isFetchingNextPage,
  } = useTrending()

It seems to work, but can anyone point me out how to set up in a better way coz I am using any in the first two types.

[TkDodo]

axios usually returns a Promise<any>, so make sure that your fetchTrending has a return type annotation, then the types for useQuery should be inferred without having to provide generics:

const fetchTodos = (): Promise<Array<Todo>> => (...)

const useTodos = useQuery('key', fetchTodos)

data returned by useTodos will be correctly inferred to Array<Todo> | undefined in this example