ReactJS/Apollo/Graphql：使用 @skip 阻止 data.refetch 直到单击 onSubmit 但重新获取仍然可用

Posted 2023-03-08

【中文标题】ReactJS/Apollo/Graphql：使用 @skip 阻止 data.refetch 直到单击 onSubmit 但重新获取仍然可用

【英文标题】：ReactJS/Apollo/Graphql: Block data.refetch w/ @skip until onSubmit is clicked but have refetch still available

【发布时间】：2019-04-05 03:42:15

【问题描述】：

经过一些调试，我发现当页面加载时，@skip 正在做我想做的事情，这阻止了页面加载时查询的执行。但是，当点击提交按钮时，应用会崩溃。

我不明白为什么开始和结束是未定义的？

variables: start: undefined, end: undefined, skipFi: true

如果我从关注应用程序中删除 skipF: true 可以正常工作：

export default graphql(getObjQ,  
    options: (props) => ( 
        variables:  
            start: props.start,
            end: props.end,
            skipF: true

         
    )         
)(Comp);

我正在尝试将 here 的概念应用到我的应用程序中：

 export default graphql(gql`
        query SearchQuery($query: String, $first: Int, $skip: Boolean!) 
            search(query: $query, first: $first) @skip(if: $skip) 
                edges 
                    ....
                
            
        
    `,   options: variables:  skip: true  )(Input);

handleSubmit 函数如下所示：

handleSubmit = event => 
        event.preventDefault();



        this.setState(
          errMsg: "",
          start: new Date(document.getElementById("start").value).valueOf(),
          end: new Date(document.getElementById("end").value).valueOf(),
          submit: true,




        , () => 
          this.props.data.refetch(
            start: this.state.start,
            end:this.state.end,


          );

查询如下所示，位于单独的文件/组件中：

    const Query =gql`
      query getObjQ($start: Float!, $end: Float!, $skipF: Boolean!

) 

  

    abs(start: $start,  end:$end) @skip(if: $skipF)

【参考方案1】：

“移动部件”太多 - 先尝试硬编码值：

handleSubmit = event => 
  event.preventDefault();

  this.props.data.refetch(
    start: XXXXXXXXXXX,
    end: YYYYYYYYY,
    skipF: false
  );

更新：

调试方法options参数（返回对象）：

export default graphql(getObjQ,  
  options: (props) => 
    console.log(props.start);
    return  
      variables:  
        start: props.start,
        end: props.end,
        skipF: true
       
    
  
)(Comp);

【讨论】：

仍在获取：variables: start: undefined, end: undefined, skipFi: true

console.log 之后，options: (props) => ( 很好。所以看起来我传递skipF: true的语法错误。