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

【问题标题】：React / Apollo client: try to use LazyQuery in useEffect hookReact / Apollo 客户端：尝试在 useEffect 挂钩中使用 LazyQuery
【发布时间】：2020-03-16 19:02:12
【问题描述】：

我尝试在组件渲染后运行测试查询。咆哮我的代码。

在 useEffect 中执行的 testQuery 函数不做任何事情。我不知道为什么...任何想法？

    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>
      );
    };

【问题讨论】：

你试过什么？我们需要更多信息。 Stack Overflow 不是“帮我写代码”的网站。
@KrikriG 你找到解决问题的方法了吗？
更改为 -> useLazyQuery (TEST_QUERY, { fetchPolicy: 'network-only' }); fetchPolicy -> 阅读更多apollographql.com/docs/react/data/queries/#cache-first

标签： reactjs react-hooks apollo-client

【解决方案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>
  );
};

您必须以某种方式处理来自查询的响应。您可以添加另一个 useEffect 来监听更改。

【讨论】：