I have been using react-apollo and the render prop approach.

This worked perfectly and my code looked something like this.

const App = () => {

   const [player, setPlayer] = React.useState(null);

   if (player) {

     return (

        <GetBroncosPlayerQuery variables={{ player }}>

           {({ data }) => {

              // do stuff here with a select box

            }} 

        </GetBroncosPlayersQuery>

     )

   }

}

Now, if I try doing the same with the useQuery hook I get the following error, when my code looks like this:

const App = () => {

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



   if (isBroncos) {

       const { data } = useQuery(GetBroncosPlayersQueryDocument, {

         variables: { player }

      });

      // do stuff here

   }

}

This gives an error that you cannot use a hook in a conditional statement. I then implemented useLazyQuery but this doesn't work either as after you call it once it behaves like useQuery, so it works the first time, but if the user changes a select dropdown to be empty again it breaks.

What is the best approach with the query hook to only call the query conditionally?