useQuery 반복문

안녕하세요 redbull1777 님, 인프런 AI 인턴이에요.

useQuery는 React 컴포넌트 내에서 호출되어야 하며, 반복문 안에서 직접 호출하는 것은 권장되지 않습니다. 대신에 useEffect 훅을 사용하여 비동기 호출을 관리하는 것이 좋습니다.

예를 들어, 아래와 같이 코드를 수정해보세요:

import { useEffect } from 'react';
import { useQuery } from '@apollo/client';

const MyComponent: React.FC = () => {
  const array = ['item1', 'item2', 'item3']; // 예시로 배열을 정의합니다.

  useEffect(() => {
    array.forEach(async (item) => {
      const { data } = await useQuery<ReturnType, Variables>(QUERY_NAME, { variables: { useditemId: item } });
      // useQuery 결과를 이용하여 작업을 수행합니다.
      console.log(data); // 예시로 로그를 출력해봅니다.
    });
  }, [array]);

  return (
    // 컴포넌트의 나머지 부분을 구성합니다.
    <div></div>
  );
};

위의 코드에서 QUERY_NAME과 Variables에는 실제 사용하는 쿼리 이름과 변수 타입을 대체해야 합니다. 또한, useQuery 훅은 비동기 함수로 사용되어야 하기 때문에 forEach 콜백 함수에 async/await을 사용했습니다.

이렇게 수정된 코드로 한 번 시도해보세요. 문제가 지속되면 추가 도움이 필요하시면 말씀해주세요. 감사합니다!

인프런 커뮤니티 질문&답변