useLazyQuery executes query twice the first time on 3.6.x
See original GitHub issueI have some code like this:
const [execute, { data, loading }] = useLazyQuery(query, {
fetchPolicy: "network-only",
nextFetchPolicy: "cache-first",
notifyOnNetworkStatusChange: true,
});
const handleClick = () => execute({ variables: { something } });
return <button onClick={handleClick}>do it</button>;
I click the button (once) but see two queries in the network tab. If i click the button a second time, with new something
, the query appears to only fire one more time, as expected
In my debugging, I found that this line is executing the query for the same variables and same options passed to useLazyQuery
:
https://github.com/apollographql/apollo-client/blob/76ad8a789a20a4962270649dfe5e5fbcfbf9c0fa/src/react/hooks/useQuery.ts#L215
for me, the second extra query has this:
currentWatchQueryOptions === {
fetchPolicy: "standby"
initialFetchPolicy: "network-only"
nextFetchPolicy: "cache-first"
notifyOnNetworkStatusChange: true
query: {…}
variables: { something }
};
// and
watchQueryOptions === {
fetchPolicy: "network-only"
nextFetchPolicy: "cache-first"
notifyOnNetworkStatusChange: true
query: {…}
variables: { something }
}
Hopefully this is helpful and not just a red herring 😃
Issue Analytics
- State:
- Created a year ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Apollo useLazyQuery repeatedly called - Stack Overflow
For calling useLazyQuery, you need to use useEffect and pass empty array [] so you can call the query exactly once, which you...
Read more >@apollo/client | Yarn - Package Manager
Properly merge variables from original useLazyQuery(query, { variables }) with variables passed to execution function. @benjamn in #9758 ...
Read more >Use useLazyQuery to manually execute a query with Apollo ...
When using useQuery from Apollo React Hooks, the request will be sent automatically after the component has been mounted.
Read more >@apollo/client - Awesome JS
Properly merge variables from original useLazyQuery(query, ... Prevent useLazyQuery from making duplicate requests when execution function first called by ...
Read more >Calling Queries Manually with useLazyQuery - Thinkster.io
This hook lets us run a query in response to an event like a button click instead of just when a component renders....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
amazing, seems to fix the issue in real app. thanks @benjamn!
@benjamn https://github.com/dairyisscary/duplicate-lazy-query main branch has it
I struggled at first to reproduce it so I kept adding more and more of my configuration until I got it. it was the
queryDeduplication: false
on the Client constructor. sorry homie; completely forgot about this setting since its fire and forget. 😃I’m less certain this is a bug now but i will say on apollo
3.4.17
this does not duplicate the network request twice even withqueryDeduplication
turned off (I’m two releases behind, I never got to 3.5). if it is not a bug, what would you recommend benjamn? there doesn’t appear to be a way to turn this on and off for an individual query – I would turn it off for this particular query if it were possible.