useLazyQuery 공식문서 해석하기

리액트에서 useQuery를 호출하는 컴포넌트를 렌더링할때, apollo client는 자동으로 일치하는 query를 실행한다.
그멈 만약 버튼 이벤트같은 다른 이벤트들에 반응하는 query를 실행하고 싶다면 어떻게 해야할까??

useLazyQuery

useLazyQuery는 컴포넌트 렌더링이외의 이벤트에 반응하는 쿼리를 실행하기에 최적의 Hook이다.

useQuery와 달리, useLazyQuery를 호출할때, 즉시 query를 실행하지 않고 query function을 리턴한다.

이 함수는 쿼리를 실행할 준비가 될 때마다 호출된다.

import React from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  // getDog는 useLazyQuery의 query function이다.
  // {loading,error,data}는 useQuery에서 사용되는 result object이다.
  const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);

  if (loading) return <p>Loading ...</p>;
  if (error) return `Error! ${error}`;

  return (
    <div>
      {data?.dog && <img src={data.dog.displayImage} />}
      <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
        Click me!
      </button>
    </div>
  );
}