Getting insufficient permission status

[acerola1]

I created a hook

import { doc } from "@firebase/firestore";
import { useFirestoreDocumentData } from "@react-query-firebase/firestore";
import { UseQueryResult } from "react-query";
import { db } from "../utils/firebase";

export interface User {
  displayName: string;
}
export const GET_USER = "GET_USER";

const useGetUser = (
  id: string,
  enabled: boolean
): UseQueryResult<User, unknown> => {
  const ref = doc(db, "users", id);
  return useFirestoreDocumentData([GET_USER, id], ref, undefined, { enabled });
};

export default useGetUser;

When I use this hook and I have insufficient permission because a security rule, I could not read this status out of the hook return values. The status is loading and the data is undefined. How can I get the security exception?

[ZeroPie]

When you use it on your component

const { error, data, isLoading } = useGetUser()

What does error contain?

[acerola1]

It is working fine. It was my bad, it eventually get the error.

error: FirebaseError: Missing or insufficient permissions.
    at index.esm2017.js:4327
    at ns (index.esm2017.js:4325)
    at to.onMessage (index.esm2017.js:11273)
    at index.esm2017.js:11227
    at index.esm2017.js:11250
    at index.esm2017.js:15093
    at index.esm2017.js:15126 

I was misled by the react-query retries.