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

Question

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.

Answer 1

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? 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.

Answer 2

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

Answer 3

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)

Answer 4

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.