graphql - 将 Config.skip 与 React-Apollo 查询一起使用

Question

我在使用 graphql() 包装器内的 Config.skip 属性时遇到了一些问题。

只有在用户从下拉列表中选择一个项目(传递关联的 currentGoalID)和 (Redux)状态已更新为 currentGoalID 的值。

否则，我希望(根据 Apollo 文档):

... your child component doesn’t get a data prop at all, and the options or props methods are not called.

不过在这种情况下，由于 currentGoalID 没有值，我的 skip 属性似乎被忽略了，并且正在调用该选项，因为 webpack 编译器/linter 在第 51 行抛出，props 不是定义...

我在没有 graphql() 的情况下成功地 console.log 了 currentGoalID 的值 wrapper 。知道为什么 config.skip 不起作用吗？还希望得到关于在 graphql() 函数调用中正确使用 this 的建议。我已将其排除在外，但我不确定上下文，谢谢。

class CurrentGoal extends Component {
    constructor(props) {
        super(props)
    }

    render (){
    console.log(this.props.currentGoalID);
    return( <p>Current Goal: {null}</p>
)
    }
  }

const mapStateToProps = (state, props) => {
    return {
        currentGoal: state.goals.currentGoal,
        currentGoalID: state.goals.currentGoalID,
        currentGoalSteps: state.goals.currentGoalSteps
    }
}

const FetchGoalDocByID = gql `
query root($varID:String) {
  goalDocsByID(id:$varID) {
    goal
  }
}`;

const CurrentGoalWithState = connect(mapStateToProps)(CurrentGoal);

const CurrentGoalWithData = graphql(FetchGoalDocByID, {
 skip: (props) => !props.currentGoalID,
 options: {variables: {varID: props.currentGoalID}}
})(CurrentGoalWithState);

// export default CurrentGoalWithState
export default CurrentGoalWithData

Answer 1

在这里查看答案:https://stackoverflow.com/a/47943253/763231

connect 必须是最后执行的装饰器，在 graphql 之后，以便 graphql 包含 props来自 Redux。