Using Config.skip with a React-Apollo Query

Question

I'm having some trouble making use of the Config.skip property inside of my graphql() wrapper.

The intent is for the query to be fired with an argument of currentGoalID, only after a user has selected an item from the drop-down (passing the associated currentGoalID) , and the (Redux) state has been updated with a value for currentGoalID.

Otherwise, I expect (as per Apollo documentation) that:

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

In this case though, it seems that my skip property is being ignored based upon the absence of a value for currentGoalID, and the option is being called because the webpack compiler/linter throws on line 51, props is not defined...

I successfully console.log the value of currentGoalID without the graphql() wrapper. Any idea why config.skip isn't working? Also wish to be advised on the proper use of this in graphql() function call. I've excluded it here, but am unsure of the context, thanks.

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

Can you add a console.log inside your skip function to print the props? — stubailo
Sure, I'll try. I'm usually unconfident about the ability to console.log within an object... — Zach_is_my_name
Thank you, @stubailo. I gave it skip: (props) => console.log(props.currentGoalID). And 'failed to compile', again, on the options line below — Zach_is_my_name
Indeed props is undefined. Shouldn't that condition it's-self be enough to call skip()? — Zach_is_my_name
@Zach_is_my_name have you opened the issue? can I have a track of it? I'm facing the same problem. — Rafael Berro

Kevin Cooper Kevin Cooper · Accepted Answer · 2018-03-22T15:32:12

See the answer here: https://stackoverflow.com/a/47943253/763231

connect must be the last decorator executed, after graphql, in order for graphql to include the props from Redux.

Using Config.skip with a React-Apollo Query

1 Answers