如何通過過濾器參數繼電器loadMore

我想過濾和分頁與現代和分頁容器的連接。這工作正常，但在過濾的連接上觸發loadMore（）時不會傳輸過濾器。如何通過過濾器參數繼電器loadMore

這是我在我的React組件中提交搜索表單代碼，它使用filter參數重新獲取連接。

_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指令，它應該支持一個過濾器鍵（我試過過濾器：[$的MatchString]沒有運氣）。

我該如何做這項工作？感謝您抽出時間。

來源

2017-09-06 user2172221

我最終通過將搜索邏輯放入根查詢容器中來分離搜索和分頁。

雖然它正在工作並滿足我的需求，但由於重新裝入根級，它並不理想。

我可能應該將分頁容器包裝在重新讀取容器中作爲更好的解決方案。

來源

2017-09-09 07:56:10 user2172221

createPaginationContainer幫手現在可以讓你做到這一點。

一旦你得到這個工作，你將在props.relay中有一個loadMore方法，並且你也將有一個refetchConnection方法可用。

filterCategory = ({slug}) => { 
    this.props.relay.refetchConnection(100, null, { 
     categoryName: slug 
    }) 
    } 

    loadMore =() => { 
    this.props.relay.loadMore(10) 
    }

來源

2017-09-15 01:59:53 Tim

如何通過過濾器參數繼電器loadMore

回答

相關問題