Using Config.skip with React-Apollo Request

I am having trouble using the Config.skip property inside my graphql () wrapper.

The goal is for the request to be fired with the currentGoalID argument, only after the user has selected an item from the dropdown (passing the associated currentGoalID) and the state (Redux) has been updated with the value for the currentGoalID.

Otherwise, I would expect (according to Apollo documentation) that:

... your child component does not receive data support at all, and props methods or methods are not called.

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

...

I have successfully console.log the currentGoalID value without the graphql () wrapper. Any idea why config.skip isn't working? Also want to get information on the correct use of this in a call to the graphql () function. I ruled it out here but not sure about 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

      

+3


source to share


1 answer


See the answer here: fooobar.com/questions/2409630 / ...



connect

must be the last decorator executed after graphql

to graphql

include the props from Redux.

0


source







All Articles