How can I have my queryFn return an error instead of throwing an error?

[rostero1]

Since there is no way for me to specify the type of error thrown in typescript, I was wondering if it'd be possible to have my queryFn return { type: 'success', data: S } | { type: 'failure', data: F }. There could even be a isSuccess config that would be result => result.type === 'success'.

[samhirtarif]

queryFn: async () => {
  try {
    const response = await axios.get(`https://dummyjson.com/products/1`);
    return response.data;
  } catch (exception) {
    return exception;
  }
}

You could try something like this, of course you'll have to take care of the types.

[rostero1]

The goal is to see if react-query will update its API to take in such a function so that it returns UseQueryResult<Data, Error> from a queryFn that returns Data | Error. I want to have type safety and throwing/handling errors in typescript doesn't really guarantee type safety.

[TkDodo]

react-query is promise based, so you'll have to return a fulfilled or rejected promise. Yes, promises only allow for one type (the type of the fulfilled part), but that's a language limitation.

In v5, error will be of type Error per default and you can narrow from there if you have specific errors. Note that it's never guaranteed that you get an AxiosError (or any other specific error you throw from the queryFn). Technically, unknown is the safest, but Error is a good compromise.

[rostero1]

Thanks for the reply @TkDodo. I've been going through your blog and learning so much about react query.

I am trying to do something like this https://twitter.com/rossipedia/status/1619773691457597441 (from @rossipedia), but couldn't figure out how to type it.

[johannes-lindgren]

If the error type parameter TError was also present in queryFn, then it would have been possible to define a higher function that returns a queryFn callback function that gives type inference to useQuery on the TError parameter.

For example, it could be used like this:

    queryFn: queryFn(async () => {

Where the anonymous function returns a result type (which includes both the TData and TError):

export const queryFn =
  <TData, TError, TQueryKey extends QueryKey = QueryKey, TPageParam = never>(
    fn: (
      // `TError` appended to type parameters here
      context: QueryFunctionContext<TQueryKey, TPageParam, TError>,
    ) => Promise<QueryResult<TData, TError>>,
  ) =>
  async (
    // `TError` appended to type parameters here
    context: QueryFunctionContext<TQueryKey, TPageParam, TError>,
  ): Promise<TData> => {

The queryFn higher-order function would rethrow the payload of the "err" values, while returning the payload from the "ok" values.

Of course, the most desirable would be if there was a native way; for example a type-safe alternative to useQuery or queryFn.