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] を試してみましたが、うまくいきませんでした)。
どうすればこれを機能させることができますか?時間を割いていただきありがとうございます。