How to rerender component based on value from useQuery hook?-CodePudding

I'm using React.js and fetching data using the useQuery hook as follows:

const { data, isFetching, error } = useGetUserProfileQuery();

I was trying the following approach to render a component but failed:

{ error !== null ? (<Error openModal={true}/>) : (<Error openModal={false}/>) }

Log of error:

{
  status: 400,
  data: { error: { status: 400, message: "Only valid bearer authentication supported" } },
};

However, it is not triggering the Error component. Does anyone have an idea about this?

CodePudding user response：

If you are getting undefined when there is no error, this error !== null check won't work. You could change it to error !== undefined or simply do so:

{ error && <Error openModal={true}/> }

It's because undefined and null are not strictly the same thing in JavaScript, as null is of type object and undefined is of type undefined. If you had error != null with one = sign it would work normally as they will get converted to the same type.

console.log(typeof null);
console.log(typeof undefined);
console.log(undefined == null);
console.log(undefined === null);