CODEWITHSUNDEEP
reactjsgraphqlrelay
Wowzaaa
Wowzaaa

Reputation: 4070

relay setVariables not trigger the query

I am learning React + Graphql + Relay ... and i am fighting for a few hours with this situation: - my component looks like this

class Main extends React.Component {
  setLimit = (e) => {
    let newLimit = Number(e.target.value);
    this.props.relay.setVariables({ limit: newLimit });
  };
  render() {
    let content = this.props.store.linkConnection.edges.map(edge => {
      return <Link key={edge.node.id} link={edge.node} /> ;
    });
    return (
      <div>
        <h3>Links</h3>
        <select onChange={this.setLimit}>
          <option value="2" selected>2</option>
          <option value="4">4</option>
          <option value="6">6</option>
        </select>
        <ul>
          {content}
        </ul>
      </div>
    );
  };
}

Main = Relay.createContainer(Main, {
  initialVariables: {
    limit: 2
  },
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        linkConnection(first: $limit) {
          edges {
            node {
              id,
              ${Link.getFragment('link')}
            }
          }
        }
      }
    `
  }
});

as u can see, there is a select in there that is correctly triggering the setLimit handler ... inside setLimit i have this.props.relay.setVariables ... although i do not get any error the query is not being re-rendered

i am surely doing a noob mistake ... just do not know what that is :) ... cause i am noob :))

thanks

Upvotes: 0

Views: 165

Answers (1)

Wowzaaa
Wowzaaa

Reputation: 4070

so i guess i will answer myself :)

  • the main reason this happened was that because graphql is returning pageIngo.hasNextPage = false
  • obviously that i had to fix it and i found out two things:
resolve: (_, args) => connectionFromPromisedArray(  
 db.collection("links").find({}).limit(args.first).toArray(),
 args
)
  1. i was querying the using the code above
  2. as u can see i am limiting the items i fetch from the db
  3. further more, the connectionFromPromisedArray function is expecting to be fed the entire array of data ... not a partial response
  4. so this will actually cause graphql to make hasNextPage to false

hope this is helpful to anyone :) ... i lost more than a day on this :)

Upvotes: 1

Related Questions