Cuando el componente llama a useQuery , desencadena la consulta posteriormente.

Pero cuando se llama a useLazyQuery , no activa la consulta posteriormente, sino que devuelve una función que se puede usar para activar la consulta manualmente. Se explica en esta página: https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

Cuando React monta y representa un componente que llama al gancho useQuery , Apollo Client ejecuta automáticamente la consulta especificada. Pero, ¿qué sucede si desea ejecutar una consulta en respuesta a un evento diferente, como que un usuario haga clic en un botón? El gancho useLazyQuery es perfecto para ejecutar consultas en respuesta a eventos que no sean la representación de componentes. Este enlace actúa como useQuery , con una excepción clave: cuando se llama a useLazyQuery , no ejecuta inmediatamente su consulta asociada. En su lugar, devuelve una función en su tupla de resultados a la que puede llamar cuando esté listo para ejecutar la consulta.

Supongamos que tiene un componente en el que llama a useQuery, luego, tan pronto como se monta el componente, useQuery se ejecuta y los datos se obtienen del servidor. Pero si usa useLazyQuery en ese componente en lugar de useQuery, la consulta no se ejecuta y los datos no se recuperan cuando se monta el componente. En su lugar, puede ejecutar la consulta según sus requisitos, por ejemplo, después de hacer clic en un botón. Ejemplo:

 import React, { useState } from 'react'; import { useLazyQuery } from '@apollo/client'; function DelayedQuery() { const [dog, setDog] = useState(null); const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO); if (loading) return <p>Loading ...</p>; if (data && data.dog) { setDog(data.dog); } return ( <div> {dog && <img src={dog.displayImage} />} <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}> Click me! </button> </div> ); }

Aquí, tan pronto como hace clic en el botón, solo se ejecuta la consulta y se obtienen los datos y se muestra la imagen. Pero si hubiera utilizado useQuery en su lugar, antes de hacer clic en el botón (es decir, cuando se monta el componente), se habrían obtenido los datos y se habría mostrado la imagen.

ACTUALIZAR:

https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#improvements-due-to-brainkim-in-8875

useLazyQuery ahora devuelve una promesa a partir de Apollo Client 3.5.0 (2021-11-08)

Algo de lo que parece no hablarse y de lo que me doy cuenta es que useLazyQuery no lee desde el caché. Esto es algo similar a llamar a la función de useQuery refetch