React / Apollo 客户端：尝试在 useEffect 挂钩中使用 LazyQuery

Question

I try to run a test query after my component has rendered. Bellow my code.

The testQuery function executed in the useEffect don't do anything. I dunno why... any idea?

    const Card2 = (props) => {

      const [count, setCount] = useState(0);

      console.log (`count :: ${count}`);

      const [testQuery,{ loading, data}] = useLazyQuery (TEST_QUERY);

      if(loading) debugger;


      useEffect(() => {
        console.log('useEffect');
        testQuery();
        debugger;
      },[count]);

      return(
        <div className={classes.Content} >
          <button className={classes.Price} onClick = {() => setCount(count + 1)}>
          </button>
        </div>
      );
    };

Answer 1

const Card2 = (props) => {

  const [count, setCount] = useState(0);
  const [fetchedData, setFetechedData] = useState([])
  console.log (`count :: ${count}`);

  const [testQuery,{ loading, data}] = useLazyQuery (TEST_QUERY);

  if(loading) debugger;


  useEffect(() => {
    console.log('useEffect');
    testQuery();
    debugger;
  },[count]);

  useEffect(() => {
    data && setFetechedData([...fetchedData, data])
  },[data]);

  return(
    <div className={classes.Content} >
      <button className={classes.Price} onClick = {() => setCount(count + 1)}>
      </button>
    </div>
  );
};

You have to handle the response from the query in some way.You could add another useEffect to listen for changes.