0

私はReact + Graphql + Relayを学んでいます...そして私はこの状況で数時間戦っています:-私のコンポーネントは次のようになります

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')}
            }
          }
        }
      }
    `
  }
});

ご覧のとおり、setLimitハンドラーを正しくトリガーしている選択があります... setLimit内にthis.props.relay.setVariablesがあります...エラーは発生しませんが、クエリは再レンダリングされていません

私は確かに初心者の間違いをしています...それが何であるかわかりません:) ...原因私は初心者です:)）

ありがとう

4

1 に答える 1

1

だから私は自分自身に答えると思います:)

  • これが発生した主な理由は、graphql が pageIngo.hasNextPage = false を返すためです。
  • 明らかに私はそれを修正しなければならず、2つのことがわかりました：
resolve: (_, args) => connectionFromPromisedArray(  
 db.collection("links").find({}).limit(args.first).toArray(),
 args
)
  1. 上記のコードを使用してクエリを実行していました
  2. ご覧のとおり、データベースから取得するアイテムを制限しています
  3. さらに、connectionFromPromisedArray 関数は、部分的な応答ではなく、データの配列全体が供給されることを期待しています。
  4. これにより、実際にはgraphqlがhasNextPageをfalseにします

これが誰にとっても役立つことを願っています:) ...これで1日以上を失いました:)

于 2016-05-22T19:40:30.367 に答える