useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출

useLazyQuery

https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

• useLazyQuery는 Apollo Client에서 제공하는 React 훅으로, GraphQL 쿼리를 즉시 실행하지 않고, 필요할 때 호출할 수 있는 방법을 제공해 준다.
• 일반적인 useQuery는 컴포넌트가 마운트 될 때 자동으로 쿼리를 실행하지만, useLazyQuery는 사용자가 명시적으로 실행할 때까지 대기하는 차이가 있다.

 

 

useLazyQuery를 사용할 때는 다음과 같은 형태로 사용된다:

const [getQueryResult, { loading, data, error }] = useLazyQuery(MY_QUERY);

이 훅은 두 가지 값을 반환해 준다

1. getQueryResult
   • 쿼리를 트리거하는 함수.
   • 사용자가 원하는 시점에 이 함수를 호출하면 쿼리가 실행된다.
2. 결과 객체
   • 쿼리 상태(loading, data, error 등)를 포함한 객체.

 

 

예시

import { useLazyQuery } from '@apollo/client';
import { MY_QUERY } from './queries';

function MyComponent() {
  const [getQueryResult, { loading, data, error }] = useLazyQuery(MY_QUERY);

  return (
    <div>
      <button onClick={() => getQueryResult()}>
        쿼리 실행하기
      </button>
      {loading && <p>로딩 중...</p>}
      {error && <p>에러 발생: {error.message}</p>}
      {data && <p>결과: {JSON.stringify(data)}</p>}
    </div>
  );
}

• 위 예시에서는 버튼을 클릭할 때 쿼리가 실행되고,
• 쿼리의 상태에 따라 로딩, 에러, 데이터가 화면에 표시된다.
• useLazyQuery는 사용자가 특정 이벤트(예: 버튼 클릭, 특정 조건 만족 등)에 따라 쿼리를 실행할 필요가 있을 때 유용하다.