Getting Error field for Query component as undefined when I cause a validation error


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){

Error message


export function hoc(component, props){

const errorcheck = (props) => props?.error;
return ErrorTemplate(errorcheck)

Thanks for your help.