Skip to content

useTransactionQuery not resolved when called after rendering #233

Description

@DiRaiks

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
request
response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions