Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

1.3K
Vistas
What is the difference between useQuery and useLazyQuery in Apollo graphQL?

I was going through the documentation of Apollo React hooks.

And saw there are two queries hooks to use for which is useQuery and useLazyQuery

I was reading this page. https://www.apollographql.com/docs/react/api/react/hooks/

Can someone explain me what is the difference between them and in which case it should be used.

over 4 years ago · Santiago Trujillo
4 Respuestas
Responde la pregunta

0

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/#executing-queries-manually

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? The useLazyQuery hook is perfect for executing queries in response to events other than component rendering. This hook acts just like useQuery, with one key exception: when useLazyQuery 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.

over 4 years ago · Santiago Trujillo Denunciar

0

Suppose you have a component where you call useQuery, then as soon as the component mounts, useQuery runs and the data is fetched from the server. But if you use useLazyQuery in that component instead of useQuery, query doesn't run and data isn't fetched when component mounts. Instead you can run the query based on your requirement, say after clicking a button. Example:

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>
  );
}

Here, as soon as you click the button, then only the query runs and data is fetched and the image is displayed. But if you had used useQuery instead, before clicking the button (i.e when the component mounts), the data would have been fetched and the image would have been displayed

over 4 years ago · Santiago Trujillo Denunciar

0

UPDATE:

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

useLazyQuery now returns a promise as of Apollo Client 3.5.0 (2021-11-08)

over 4 years ago · Santiago Trujillo Denunciar

0

Something that seems not to be spoken about that I just realize is that useLazyQuery doesn't read from the cache. This is somewhat similar to calling the refetch function returned from useQuery.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda