useLazyQuery is called on every re-render if we change the query variables

[alexpermiakov]

I'm not sure if it’s a bug or not. In case if it's not, we have to update the doc, saying that you still will execute the query if you update your query variables.

The original issue.
It affects the latest apollo client version.

[alexpermiakov]

I've re-read the doc, I think this is a bug. The whole point of useLazyQuery is executing queries in response to events other than component rendering, but this is what exactly happens when we change the query variables - we make a network call every single render (in case of only-network or cache-and-network policies).

[alexpermiakov]

Thoughts @benjamn? Not sure what to do with it.

[Relsig]

If you pass the variables when you use the function to call the query instead of setting them on the query itself this won't happen.

It doesn't make sense for updating the variables inside the query to do this. Most people would expect either method to only execute the query when the function is called.

demonstration of the query executing on every render
(variables set on instantiation): https://codesandbox.io/s/vigorous-forest-8609l

demonstration of the query only executing on function call
(variables set on call): https://codesandbox.io/s/bold-platform-jk2wo

[petercorrea]

Thanks for the alternative solution @Relsig. @alexpermyakov I'm new to Apollo, so naturally I thought I missed something...came across this after trying to debug for too long. Nice to know I'm not the only one!

[amaljosea]

@pmcorrea

I also spend lot of time time on this issue, I am new to apollo. Either we need to add this to doc or need to make a fix. I will check if I can do something on this.

@Relsig thanks for sharing a quick solution.

[amaljosea]

As per this line, the query will be executed again if any of the options passed to the useLazyQuery hook changes. This behaviour is same for useLazyQuery and useQuery.

I think we can do any one of the below to close this issue:

1. Remove the re execution of the query when the options passed changes in the case of useLazyQuery.
2. Add a new sentence in the doc something like below

The query will be executed again if any of the options passed to the useLazyQuery hook changes. This behaviour is same for useLazyQuery and useQuery.

The problem with this 1st solution is that it might break somebody's code. So I think it is better to add the sentence to the doc.

I will raise a pr with the change.

[SachaG]

Since the whole point of useLazyQuery is to have better control over when exactly the query runs, I think this behavior should be changed to better match user expectations, personally.

[tholman]

Also ran into this problem today and was confused about the naming, seems like useLazyQuery turns into regular useQuery after its been ran once.

Is anyone working around this in some clever ways?

[nielskrijger]

@tholman if you want to have better control over when queries fire, it's probably easier to use the apollo client directly:

const client = useApolloClient();

const response = await client.query({
      query: SOME_QUERY,
      variables: ...
      fetchPolicy: 'no-cache'
});

That API is more predictable than useQuery and useLazyQuery.

I've tried keeping everything stable using useMemo but useLazyQuery just kept firing on each render the moment I added any type of fetchPolicy. When removing fetchPolicy it does work the way I wanted it to (but not an option in my use case).

[nielskrijger]

Turns out the reason for our redundant rerequests were different, it had nothing to do with fetchPolicy.

In our use case we switch Apollo clients depending on a context. During that switch all useQuery and useLazyQuery retrigger even if all variables/options remain the same. Solutions to this are client.query(...) or skip: true (for useQuery).