Again, onCompleted is not called when useLazyQuery

[zvitek]

Hey. Hey,
I know this has been brought up a few times. I looked at the history of issues and tried all the combinations.
But I can't get to the state where onCompleted is called on useLazyQuery and I don't know what to try next.

I have the following simple call in hook

const [loadNotificationQuery, { loading, data }] = useLazyQuery<NumberOfNotificationsQuery>(
    NumberOfNotificationsDocument,
    {
	onError: () => {
                console.log(data);
	},
	onCompleted: (data) => {
                console.log(data); 
	},
    }
);
	
const load = useCallback(async () => {
    const variables: NotificationQueryParams = {
	  id: getId(),
	  _: Math.random(),
    };
    await loadNotificationQuery({ variables });
}, [loadNotificationQuery, getId]);

const syncNotifications = useCallback(async (): Promise<void> => {
	await load();
}, [load]);

useEffect(() => {
	console.log(loading, data);
}, [loading, data]);

return {
	syncNotifications,
};

When I call the syncNotifications function, the console calls the request, which returns the correct status 200 and the contents in the payload.

However, even if the request is correct, the onCompleted callback is called and the load is still in true state and data are undefined.
I also tried pure useQuery, but the same result.

I tried different settings and combinations of fetchPolicy as notifyOnNetworkStatusChange. But none of them helped.
I have tried older versions as well. Nothing.

The call is made within React Native, but I don't see that being an issue there.

Anyone else have any idea where the problem might be?

Thank you a lot!

[phryneas]

Hi @zvitek,

you write

But I can't get to the state where onCompleted is called on useLazyQuery

and then you write

However, even if the request is correct, the onCompleted callback is called

so I have to admit, I'm a bit confused: Is it being called, or is it not being called?

[zvitek]

I'm sorry.
The correct sentence should be:
However, even if the request is correct, the onCompleted callback is not called and the load is still in true state and data are undefined.

[jerelmiller]

@zvitek without a reproduction its a bit difficult to understand what might be happening here. This seems pretty standard usage of the hook.

That being said, what happens if you remove the _: Math.random() variable to the query? That is the only thing that looks suspect at a glance. Does this give you the same result or does it start working? Could you perhaps explain that variable a bit more?

[zvitek]

@jerelmiller
The state is the same even if I remove the variable. It only ensures that the request is not cached at all and is always called.
I understand that it is hard to debug this way. Rather, I'm trying to see if anyone has encountered this and how they have possibly solved it.

[jerelmiller]

What version of @apollo/client are you using? useLazyQuery has certainly had its bugs in the past, but this seems like a pretty standard use of the hook so I'd assume we'd have heard a lot more by now on this case. There's definitely more at play here than meets the eye. Any other information you can provide would be super helpful (such as your ApolloClient setup, how you're using this hook in a component, etc.)

[jerelmiller]

Hey @zvitek 👋

Just a quick nudge on this issue, any chance you could provide us some more information and a reproduction that shows the issue here?