What is the correct way of typechecking a ReactQuery custom fetch ? . I'm getting an error of : "....is of type unknown"

I'm using typescript + react-query and I'm writing a custom fetch. I want to properly type this function, but I'm getting confused on how best to do it and I'm getting the following typescript error when trying to use the myQuery.error.message

const locationQuery: QueryObserverRefetchErrorResult<IResponse, unknown> | QueryObserverLoadingErrorResult<IResponse, unknown>
'locationQuery.error' is of type 'unknown

This is what I have now.

interface IResponse extends IGeolocation { ...some interface data }

export async function getLocation(searchTerm: string): Promise<IResponse> {
  console.log(`searchTerm binnen getLocation: ${searchTerm}`);

  const result = await geopuntApi.get(`/geolocation/location?q=${searchTerm}`);

  console.log(`result: ${result}`);
  return result.data.LocationResult;
}

export function useLocation(searchTerm: string) {
  console.log(`searchTerm binnen useLocation: ${searchTerm}`);
  return useQuery<IResponse>(
    ['location', { searchTerm }],
    () => getLocation(searchTerm),
    {
      enabled: !!searchTerm,
    },
  );
}

and here is how I'm using it

... some omitted code 

const locationQuery = useLocation(searchTerm);

... some omitted code

 <pre>{JSON.stringify(locationQuery.data, null, 2)}</pre>
 {locationQuery.isError && <p>{locationQuery.error.message}</p>} // <<- [ERROR] here

You're missing the generic parameter for the type of the errors the query can generate:

export function useLocation(searchTerm: string) {
    console.log(`searchTerm binnen useLocation: ${searchTerm}`);
    return useQuery<IResponse, { message: string }>(["location", { searchTerm }], () => getLocation(searchTerm), {
        enabled: !!searchTerm,
    });
}

Here I've just added { message: string } just to satisfy the compiler for when you try to use locationQuery.error.message, but you may want to find the correct type later.

Playground

There is no way to "properly type" errors, because it's not guaranteed that a certain kind of error is thrown. With Promises, you can only type the value of a successful promise. The one for the erroneous part is either undefined or any.

It's the same as with try / catch - the error you're getting in the catch part is either unknown or any - depending on your TypeScript settings.

There are ways to "type" it, but everything we do is a "lie" to the compiler:

• Passing generics like this answer suggests is possible, but has a different set of issues. useQuery has 4 generics, so if you only provide two, the other two fall back to the default value, which will make type inference not work in some situation, especially when you're using select.

So really, the best thing you can do is just a runtime narrowing:

const { error } = useQuery(...)

if (error instanceof Error) {
  // error.message is now string
}

I have a blogpost on this topic: https://tkdodo.eu/blog/react-query-and-type-script#what-about-error

In v5 of react-query (currently in alpha), we've made the following convenience improvements:

• per default, Errors will be of type Error, not unknown. This will make .message available per default. It's not "correct", strictly speaking, because you could still reject a Promise with a non-error, but 99% of people don't do that, and runtime errors will also always be an Error with a message.
• you can globally override what your Error type will be for all cases if you have different Error types that you want to specify. Of course, this is even more "unsafe", but if you're sure you're always getting an AxiosError, you can do:

declare module '@tanstack/react-query' {
  interface Register {
    defaultError: AxiosError
  }
}

const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const error: AxiosError | null

This example is from the v5 docs: https://tanstack.com/query/v5/docs/react/typescript#registering-a-global-error

Of course, you can also use this to take errors back to unknown if you want.