쿼리 후크 반응 Apollo 조건부 호출 사용

쿼리 후크 반응 Apollo 조건부 호출 사용

사용하고 있습니다.react-apollo렌더 소품 접근법도 있습니다.

이건 완벽하게 작동했고 내 코드는 이렇게 생겼습니다.

const App = () => {
   const [player, setPlayer] = React.useState(null);
   if (player) {
     return (
        <GetBroncosPlayerQuery variables={{ player }}>
           {({ data }) => {
              // do stuff here with a select box
            }} 
        </GetBroncosPlayersQuery>
     )
   }
}

이제, 만약 제가 같은 일을 시도한다면useQuery후크 코드가 다음과 같은 경우 다음과 같은 오류가 발생합니다.

const App = () => {
   const [player, setPlayer] = React.useState(false);

   if (isBroncos) {
       const { data } = useQuery(GetBroncosPlayersQueryDocument, {
         variables: { player }
      });
      // do stuff here
   }
}

이로 인해 조건부 문에서 후크를 사용할 수 없다는 오류가 발생합니다.그 후, 저는useLazyQuery그러나 이것은 한번 동작하면 호출 후처럼 동작하지 않기 때문에 처음 동작하지만 사용자가 선택 드롭다운을 다시 빈 상태로 변경하면 끊어집니다.

쿼리 후크를 사용하여 조건부로만 쿼리를 호출하는 최선의 접근법은 무엇입니까?

다음 옵션을 사용해야 합니다.

skip이 true이면 쿼리는 완전히 건너뜁니다.

const isBroncos = getCondition();

const App = () => {
  const [player, setPlayer] = React.useState(false);

  const { data } = useQuery(GetBroncosPlayersQueryDocument, {
    variables: { player },
    skip: isBroncos
  });

  return !isBroncos && data && <>...</>;
};

언급URL : https://stackoverflow.com/questions/59489097/use-query-hook-react-apollo-conditional-call