Hi,
I’m trying to test my API and error handling using a higher order component in next js. I have used a query component for fetching data. I have caused a validation error by mistyping a field in the query, I’m handling the error first in hoc if the query gets an error and second in the component when I’m using the data, for both the Error template ( one is hoc and other is template) same props of query component is passed. For first few seconds I’m able to see the hoc template but later I’m routed to the error template in the mid way my error filed which says validation error is replaced by error: undefined even when the error persists. please refer to the code given below:
query component:
{
(props) => Ehoc
( ({ data, loading, error, refetch}) =>
{!loading &&!data &&( )}
{!loading && data && ( )}
</React Fragment>}
Error Template:
export function ErrorTemplate(component){
component? return
Error message
}
Error Component :
export function ErrorComponent(component){
return
Error message
}
hoc:
export function hoc(component, props){
const errorcheck = (props) => props?.error;
return ErrorTemplate(errorcheck)
}