Reactjs / Graphql：在页面加载时停止执行graphql查询

Posted 2023-03-08

【中文标题】Reactjs / Graphql：在页面加载时停止执行graphql查询

【英文标题】：Reactjs/Graphql: Stop graphql query from executing when page is loading

【发布时间】：2019-04-04 01:06:53

【问题描述】：

经过一些调试，我发现当页面加载时，React 正在执行以下查询：

export default graphql(Query,  
    options: (props) => ( 
        variables:  
            start: props.start,
            end: props.end
         
    )         
)(Comp);

来自服务器的错误是“错误请求”，这似乎是因为 start 和 end 为空，并且它们被分配为 Float！当然，这些变量将是空的；用户尚未输入值。

当我在 UI 中输入值并单击提交时，它工作正常。我只需要帮助弄清楚如何防止在页面加载时执行此查询。并且仅在点击提交按钮时执行。

【问题讨论】：

你能多发些代码吗，特别是构造函数，componentWillMount和componentDidMount

您是否尝试过将skip 属性设置为true？ apollographql.com/docs/react/essentials/queries.html#props

【参考方案1】：

只需向qraphql hoc 提供skip 函数：

export default graphql(Query, 
  skip: ( start, end ) => (!start || !end),
  options: ( start, end ) => (
    variables:  start, end 
  )
)(Comp);

【讨论】：

页面加载不再出错，但是现在，当按下提交按钮时应用程序崩溃。

这感觉像是一个完全独立的问题。我建议您创建一个新问题并提供完整的组件代码

按下提交按钮时，控制台会显示一个空数组，就像页面加载后一样。因此，即使按下提交按钮并且未执行查询，似乎也正在实现跳过。出现此错误消息：Cannot read property 'loading' of undefined.

再一次，这是一个完全独立的问题。不看代码什么也说不出来

skip 好像有一些问题，github.com/apollographql/react-apollo/issues/289。不过感谢您的帮助。