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

Posted 2023-03-10

【中文标题】将 Config.skip 与 React-Apollo 查询一起使用

【英文标题】：Using Config.skip with a React-Apollo Query

【发布时间】：2017-10-08 06:31:49

【问题描述】：

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

意图是使用 currentGoalID 的参数触发查询，仅在用户从下拉列表中选择一个项目（传递关联的 currentGoalID）和 (Redux)状态已更新为 currentGoalID 的值。

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

...你的子组件根本没有获取到 data prop，也没有调用 options 或 props 方法。

不过，在这种情况下，由于 currentGoalID 没有值，我的 skip 属性似乎被忽略了，并且该选项被调用，因为 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

【问题讨论】：

你可以在你的跳过函数中添加一个console.log来打印道具吗？

当然，我会试试的。我通常对 console.log 在对象中的能力不自信...

谢谢你，@stubailo。我给它跳过：(props) => console.log(props.currentGoalID)。并且在下面的选项行中再次“编译失败”

确实 props 是未定义的。那个条件不应该足以调用skip()吗？

@Zach_is_my_name 你打开问题了吗？我可以追踪它吗？我也面临同样的问题。

【参考方案1】：

在此处查看答案：https://***.com/a/47943253/763231

connect 必须是最后一个执行的装饰器，在 graphql，以便graphql 包含来自 Redux 的道具。