useTransactionQuery not resolved when called after rendering #233
Description
Hello! I found a very strange bug.
Please see what the problem is or tell me what I'm doing wrong =)
If we call the "useTransactionQuery" hook after the component has already been rendered, then we only get isLoading = true. This flag does not change anymore and the data in the component is not displayed. If you look at the 'network' tab in the browser, we will see that the request was successful and the response came from the server.
Here is a screenshot of the sample code.
Code
export const useApp = () => {
const [userId, setUserId] = useState<string>();
useEffect(() => {
const timeout = setTimeout(() => {
setUserId('some-ID');
}, 4000);
return () => clearTimeout(timeout);
}, []);
const variables = { userIds: [userId], userGroupTypeId: 2 };
const skip = userId === undefined;
const { data, isLoading } = useTransactionQuery(
(query, args) => query.calendarEvent?.getParticipantGroupIds(args).map((item) => item),
{
variables,
skip,
},
);
console.log('--->>>useTransactionQuery', isLoading, data);
return { isTransactionQueryLoading: isLoading, data };
};JSX
<div>
{data?.map((item) => (
<span key={item}>{item}</span>
))}
</div>In console
--->>>useTransactionQuery false undefined
--->>>useTransactionQuery true undefined
--->>>useTransactionQuery true undefined
Request in browser network