Not able to execute `useLazyQuery` multiple times with different variables

I’m not 100% sure whether this is a valid use case for useLazyQuery(), but I still think this new behaviour is not intended because of the following reasons:

• The behaviour has changed between v3.5.10 and v3.6.x.
• The new behaviour does not seem to be right, since the promise that gets resolved after executing a query with some variables corresponds to the response from another query executed with different variables.

Intended outcome:

When executing the same lazy query twice on the same tick with different variables, Apollo should execute two network requests each one with the corresponding variables and return the correct results

const [fetch] = useLazyQuery(CountriesList);

useEffect(() => {
  Promise.all([
    fetch({variables: {continent: "EU"}}),
    fetch({variables: {continent: "NA"}})
  ]).then(([result1, result2]) => {
    // result1 should contain the results of executing CountriesList query with continent=EU
    // result2 should contain the results of executing CountriesList query with continent=NA
  });
}, [fetch]);

Actual outcome:

When executing the same lazy query twice on the same tick with different variables, Apollo instead executes a single network request and returns the same results for the two requests.

So, on the code snipped pasted above, both result1 and result2 contains the results of executing CountriesList query with continent=NA.

How to reproduce the issue:

• CodeSandbox with apollo@3.6.4 (issue reproducible): https://codesandbox.io/s/winter-sea-1i2wpn?file=/src/App.js
• CodeSandbox with apollo@3.5.10 (issue not appearing): https://codesandbox.io/s/silly-resonance-c8nj8i

The expected behaviour is the two fetch calls on L27 and L28 to return different results, and therefore the UI should show 2 columns with different sets of countries.

Versions

@apollo/client >= 3.6.0 (the issue is also present in the currently latest available alpha (v3.7.0-alpha.7).

[louleo]

Got this issue as well. Another work around would be useApolloClient directly.

  const client = useApolloClient();
  const promises = Array.map((item) => {
    return client.query({
     query: YOUR_QUERY_DOCUMENT,
     variables: {
     YOUR VARIABLES  
   }  
  })
  });
 Promise.all(promises).then(...)

[jerelmiller]

@rafeca thanks so much for this detail. This is extremely helpful understanding the context surrounding this issue.

I’ll try and respond to bits of this over time, but I’d love to take this back to the Apollo team and throw some ideas/questions around. FWIW, I agree that there are a few quirky things with useLazyQuery (like the loading flag in the resolved promise you pointed out). We’ll discuss and figure out if we deem this buggy or not.

Thanks again!