When useQuery
is called by the component, it triggers the query subsequently.
But when useLazyQuery
is called, it does not trigger the query subsequently, and instead return a function that can be used to trigger the query manually.
It is explained on this page:
https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery
When React mounts and renders a component that calls the
useQuery
hook, Apollo Client automatically executes the specified query.
But what if you want to execute a query in response to a different event, such as a user clicking a button?
TheuseLazyQuery
hook is perfect for executing queries in response to events other than component rendering.
This hook acts just likeuseQuery
, with one key exception: whenuseLazyQuery
is called, it does not immediately execute its associated
query.
Instead, it returns a function in its result tuple that you can call whenever you’re ready to execute the query.