Error handling a custom hook that wraps two or more queries for derived data

[mheinzelman]

Hello!
Is there a good way to handle errors for a custom hooks that wraps one or more queries? I have a custom hook that wraps two queries to transform the data into a shape more suitable for the UX. This hook is called multiple places throughout the page. My current strategy to handle errors is to have a simple useEffect within the the custom hook to render a toast message on error

useEffect(() => {
   if (isErrorQueryOne || isErrorQueryTwo) {
      showErrorToast('ERROR')
   }
}, [isErrorQueryOne, isErrorQueryTwo, showErrorToast])

This obviously won't work as the error toast would be shown for each use of the custom hook.
I would like to be able to wrap the queries in a custom hook for the following reasons:

1. Both queries are frequently used individually throughout the application, so I would like to be able to leverage the already cached values
2. Both of these queries fetch data that can be mutated from within this application, so wrapping them in a custom hook makes it much easier to invalidate the cache when a mutation is made.

I used to handle this by fetching both sets of data from within the query fetch function, and using the global onError callback on the QueryCache, but this isn't the best because of reason 2 listed above. Is there any way I can consolidate the errors into a single error event similar to how the QueryCache onError behaves?

[TkDodo]

I don't quite understand how nr. 2 relates to error toasts 🤔 . I think you can have custom hooks but still use the global onError callback on the QueryCache, which is what I think would be the way to go ...