Question

我在 graphql（）包装器中使用 Config.skip 属性时遇到了一些麻烦。

只有在用户从下拉列表中选择了一个项目（传递关联的currentGoalID）和（Redux）之后，才会使用 currentGoalID 参数触发查询。状态已使用 currentGoalID 的值进行更新。

否则，我希望（根据Apollo文档）：

...您的子组件根本没有获得数据道具，并且不会调用选项或道具方法。

在这种情况下，似乎我的skip属性被忽略，因为缺少currentGoalID的值，并且正在调用该选项，因为webpack编译器/ linter抛出第51行props is not defined。 ..

我成功console.log没有graphql（）的currentGoalID的值包装。知道为什么 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包含Redux中的道具。

使用Config.skip和React-Apollo查询

1 个答案: