Best way to handle errors with multiple components sharing queries
I have encountered a use case and would like to know the best practice for handling it. I have three components that use the same hook, retrieving “requests.”
In case of failure, I want to display an ErrorRequest.tsx component, which may be the same or different in each component, that doesn't matter. The problem is that if I check the “isError” state in each component, I will end up displaying the ErrorRequest.tsx component three times when there is an error, which would be strange for the user. Also, if I want to pass the refetch function, the buttons in ErrorRequest.tsx will not be synchronized because they do not share state.
I discussed this with Claude, and he said that the only solution would be for a single component to request isError and return ErrorRequest.tsx, and for the other two to return an empty fragment. But I don't think that solution is scalable. Another option would be an ErrorBoundary, but I have other components that use other hooks on the page, and it would be bad for the user if, because one endpoint has an error, they couldn't see other components that don't have it.
What is the best approach for this?
In case of failure, I want to display an ErrorRequest.tsx component, which may be the same or different in each component, that doesn't matter. The problem is that if I check the “isError” state in each component, I will end up displaying the ErrorRequest.tsx component three times when there is an error, which would be strange for the user. Also, if I want to pass the refetch function, the buttons in ErrorRequest.tsx will not be synchronized because they do not share state.
I discussed this with Claude, and he said that the only solution would be for a single component to request isError and return ErrorRequest.tsx, and for the other two to return an empty fragment. But I don't think that solution is scalable. Another option would be an ErrorBoundary, but I have other components that use other hooks on the page, and it would be bad for the user if, because one endpoint has an error, they couldn't see other components that don't have it.
What is the best approach for this?
