Best way to return not found in useQuery?

[SzabKel]

Recently (?) useQuery logs a console error when the queryFn returns undefined:

react_devtools_backend.js:4026 Error: Query data cannot be undefined
    at Object.onSuccess (query.ts:453:1)
    at resolve (retryer.ts:103:1)

I can set a breakpoint here and log this and looking at the query key I can figure out which call was it.

    this.retryer = createRetryer({
      fn: context.fetchFn as () => TData,
      abort: abortController?.abort.bind(abortController),
      onSuccess: (data) => {
        if (typeof data === 'undefined') {
          onError(new Error('Query data cannot be undefined') as any) // <--- HERE
          return
        }

Up till now, I used undefined to return "Not found" type of results. Like, getDetailsById(id: string | null | undefined) and return undefined if the id is missing or the API not found anything by that particular id. This is convenient, because later I can just use if (!details) ... to check missing data. This is not a problem for array type of results, there I can just return [].

If I am forced to return something else, I would need to do a type check every time.

getDetailsById = async (id: string | null | undefined): DetailsModel | NotFound => {
 ....
}

Maybe I could use null and return it instead of undefined, but later it could also be included in the condition, so I am wondering what would be the best practice here? Should I always throw an error in such cases?

[TkDodo]

in v4, undefined is not allowed for a "successful" query, as we now use undefined to indicate that the query is not ready. This allows bailing out of updates with setQueryData by returning undefined.

Should I always throw an error in such cases?

yes, that's what I would do.