Refetch "expression is not callable"

[eurobob]

I am wrapping axios-hooks in my own custom hook, which is then called by other hooks to fetch data based on specific API configurations

const useQuery = (
  data: QueryParams,
  url = '/request/url/',
  config = {},
) => {
  const {token} = useContext(TokenContext);
  const [response, fetchResponse] = useAxios(
    {
      method: 'POST',
      url,
      data,
    },
    config,
  );

  useEffect(() => {
    fetchResponse();
  }, [clientToken, fetchResponse]);

  return [response, fetchResponse];
};

const useCountriesQuery = (
  {
    startDate,
    endDate,
    from = 0,
    limit = 5,
    sort = 'revenue',
    sortDirection = 'desc',
  }: QueryParams = {},
) => {
  return useQuery({
    call: `countries`,
    startDate,
    endDate,
    from,
    limit,
    sort,
    sortDirection,
  });
};

I then call this data inside a component:

const [countries, fetchCountries] = useCountriesQuery({
    from: countriesCursor,
    limit: 15,
    sort: sortBy.value,
    ...dateParams,
  });

And finally, when some sorting parameters change I want to refetch:

  useEffect(() => {
    setCountriesCursor(0);
    fetchCountries();
  }, [sortBy, fetchCountries]);

But typescript is complaining:

const fetchCountries: ResponseValues<any, QueryParams, any> | ((config?: AxiosRequestConfig<QueryParams> | undefined, options?: RefetchOptions | undefined) => AxiosPromise<...>) This expression is not callable. Not all constituents of type 'ResponseValues<any, QueryParams, any> | ((config?: AxiosRequestConfig<QueryParams> | undefined, options?: RefetchOptions | undefined) => AxiosPromise<...>)' are callable. Type 'ResponseValues<any, QueryParams, any>' has no call signatures.ts(2349)

I'm not sure what's going wrong here :/

Previously my custom hook looked like this:

const useQuery = (
  data: QueryParams,
  url = '/request/url/',
  config = {},
) => {
  return useAxios(
    {
      method: 'POST',
      url,
      data,
    },
    config,
  );
};

But I want every response to automatically refresh based on a client token changing, as users can navigate between different clients. So why does it work when i return the useAxios hook directly, but not when i destructure and return the tuple manually?

[eurobob]

Update: first i assign "useAxios" to a variable and return that, then additionally destructure for the internal refresh, but still seems a bit odd to me

[simoneb]

Please provide a repro. Without that, the only reasonable assumption is that you're getting types wrong in your code. This is the type definition for the refetch function https://github.com/simoneb/axios-hooks/blob/master/src/index.d.ts#L37-L40