Dependent Query Error Handling in Custom Hook

[josephliccini]

Hi,

How can I best notify a consumer of a custom hook that an error has occurred in a dependent query, and should show an error state?

Here's an example:

export function useRemoteData() {
    const { data: dependencyData, isError, error } = useQuery('dependency', getDependencyData);

    return useQuery('remote-data', getRemoteData, { enabled: dependencyData });
}

If isError / error are populated and data doesn't resolve in the first useQuery, what is the suggested way to notify the consumer of this useRemoteData hook that an error has occurred, and they should use an error UI.

The second useQuery in this example will always remain in idle state, the the consumer will not be notified of the dependency's error.

I suppose one could, before returning the second useQuery, do a check across all dependencies for a query and if they are in error, return a QueryInfo type with isError set to true and error set to one of the exceptions, but this could blow up if there are multiple dependencies required to execute the final useQuery.

export function useRemoteData() {
    const { data: dependencyData1, isError: isError1, error: error1 } = useQuery('dependency1', getDependencyData1);
    const { data: dependencyData2, isError: isError2, error: error2 } = useQuery('dependency2', getDependencyData2);
    const { data: dependencyData3, isError: isError3, error: error3 } = useQuery('dependency3', getDependencyData3);

    const queryInfo = useQuery('remote-data', getRemoteData, { enabled: dependencyData1 && dependencyData2 && dependencyData3 });

    return isError1 || isError2 || isError3 ?
            { isError: true, data: null, error: 'what goes here', isIdle: false, /* all other properties for QueryInfo */ } : 
            queryInfo
    }
}

[lukesmurray]

did you ever find a solution to this @josephliccini. I tried writing some wrapper hooks to deal with this problem and ran into stale closure issues. If I come up with a solution I'll post it here but it has been more challenging than expected.

[josephliccini]

Our solution is essentially what I posted above, though it is kind of ugly. I was hoping to get a perspective from @tannerlinsley on this scenario if he finds some free time :)

[tannerlinsley]

I think I would just check if an error exists in the parent query and if it does, return the parent query with the error instead of the child query.

Another idea would be to allow the dependent query to run even when a parent error occurs, but just have it error with its own error.

[lpolon]

I've been using react-query for some years now. I've used dependent queries before as a means of transforming data from the API response (not doing a new fetch in the dependent query). If you have stumbled on this thread with an issue like mine, using the select API is probably what you need. Covered nicely in this blog post.

[ealexhaywood]

export function useCustomQuery() {
  const firstQuery = useQuery({ queryKey: ['first'], queryFn: fetchFirstThing })
  
  const secondQuery = useQuery({ enabled: !!firstQuery.data, queryKey: ['second'], queryFn: fetchSecondThing })

  if (firstQuery.isError) return firstQuery

  return secondQuery
}