1

Relayモダンとページネーションコンテナとの接続をフィルタリングしてページネーションしようとしています。これは問題なく動作しますが、フィルタされた接続で loadMore() がトリガーされた場合、フィルタは送信されません。

これは、フィルタ引数を使用して接続を再取得する、React コンポーネントの送信検索フォーム コードです。

  _onSubmit = (event) => {
    event.preventDefault();
    this.props.relay.refetchConnection(
      ITEMS_PER_PAGE,
      null, 
      {matching: this.state.search}
    );
  }

コンテナはリロード時にフィルタリングされるため、これは正常に機能します。

今、もっとロードすると

  _loadMore = () => {
    const {relay, store} = this.props;
    if (!relay.hasMore() || relay.isLoading()) return;

    relay.loadMore(
      ITEMS_PER_PAGE, // Fetch the next feed items
      e => {if (e) console.log(e)},
      {matching: this.state.search}
    );
  }

一致するパラメーターはアクティブではなくなり、完全なリストが再び表示されます。

ページネーション コンテナーで、一致する値を含むように getVariables() を設定します。ここでは、console.log(fragmentVariables.matching) に適切な値が含まれています。

getVariables(props, {count, cursor}, fragmentVariables) {
  return {
    count,
    cursor,
    matching: fragmentVariables.matching
  };
},
query: graphql.experimental`
  query playersStoreQuery(
    $count: Int!
    $cursor: String
    $matching: String
  ) {
    store {
      players(
        first: $count
        after: $cursor
        matching: $matching
      ) @connection(key: "playersStore_players") { ...

ただし、新しい接続はフィルタリングされません。

問題は_loadMore()呼び出し、正確にはrelay.loadMore()にあると思われます

または @connection ディレクティブで、filters キーをサポートする必要があります (filters: [$matchstring] を試してみましたが、うまくいきませんでした)。

どうすればこれを機能させることができますか?時間を割いていただきありがとうございます。

4

2 に答える 2