I'm using react-query for data fetching. I wrote a useQuery function. I passed it an onError callback function that handle the errors that occur if the query fails.

Inside the onError function I access the property message of the err object. The problem is, sometimes I get an error Cannot read property message of null. Right before the access to the property, I printed the err object value and it is null. How can the error function get an error object that is null?

This is the code of the useQuery:

export function useGetSubject(subjectId: string) {
    const guid = useGuid();
    useEffect(() => {
        return () => store.dispatch(removeBackgroundIfErrorPresent(guid));
    }, [])
    return useQuery<Subject, Error>(['subject', subjectId], () => {
        if (subjectId) {
            return serverAccess.subject.viewSubject(subjectId)
        } else {
            return null
        }
    }, {
        refetchInterval: 60*1000,
        enabled: subjectId !== null,
        retry: (failureCount: number, error: Error) => {
            if (error && error.message === "Subject does not exist") {
                return false;
            }
            if (failureCount >= 3) {
                return false;
            }
            return true;
        }, 
        onSuccess: (data) => {
            store.dispatch(removeBackgroundErrorIfPresent(guid));
        },
        onError: (err) => {
            console.log("Error value", err) // When the bug occures, it prints null
            store.dispatch(addBackgroundError(err.message, guid))
        }
    });
}

Thank you !