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.