After using useLazyQuery hook, "called" parameter remains "true" when the component re-renders

I’m trying to use useLazyQuery hook, in a function component, and execute the query on button click. So, i’m using the “called” parameter alongside “loading” to check if my “Navigate to Google” button was pressed and the query was executed successfully to continue executing my desired action (in this case navigate to www.google.com).

On the first execution everything works as expected but when i’m executing another action in the same screen that triggers a re-render, the “called” parameter from the previous action is still “true” so my previous action is executed again even though i didn’t pressed the “Navigate to Google” button again.

Here is my TestFunctionComponent. To reproduce the issue first press the “Navigate to Google” button and then press “Force re-render” button.

In my application i use the query to retrieve the link to navigate on button click.

const useForceUpdate = () => useState()[1];

const TestFunctionComponent = () => {
    
    const forceUpdate = useForceUpdate()
    const [executeQuery, { called, loading, data }] = useLazyQuery(MY_QUERY);

    if (called && !loading) {
        window.open(data .navigationLink, '_blank')
    }

    const handleOpenAnalysisFormPdf = () => {
        return executeQuery({
            variables: {
                medicalDocumentId: 6089249
            },
        });
    }

    return (
        <Fragment>
            <Button variant="outlined" onClick={handleOpenAnalysisFormPdf}>
                {"Navigate to Google"}
            </Button>
            <Button variant="outlined" onClick={forceUpdate}>
                {"Force re-render"}
            </Button>
        </Fragment>
    )
}

export default TestFunctionComponent;

Thank you!

[watchinharrison]

So, i’m using the “called” parameter alongside “loading” to check if my “Navigate to Google” button was pressed and the query was executed successfully to continue executing my desired action (in this case navigate to www.google.com).

If you provide an onCompleted callback to useLazyQuery if will be executed once your query completes successfully. See docs for options.

I don’t think this fixes the underlying issue. Unless the called can be reset to false via an exposed method or setter, it’s set once a single query is made, regardless of it’s response.

My use case is to authenticate an input against a graphql endpoint, on “Submit” I invoke the query via useLazyQuery, check if the response is successful and then navigate away or show an error. It would be good to be able to set called to false until it’s next called via useLazyQuery.

[alexandra-c]

@pontusab This is not really my case, my problem is that after the first execution of the query was done successfully and this line window.open(data .navigationLink, '_blank') is executed, on any other action executed on this screen that triggers a re-render, that windows.open command is triggered again and again because called parameter from my if statement is never false.