Relay Modern: Wie man eine Ladeanzeige auf loadMore in einem PaginationContainer zeigt

Question

Ich versuche herauszufinden, wie eine Ladeanzeige in einer Relay Modern-Anwendung angezeigt wird, wenn Daten gepaged werden. Ich habe eine Komponente, die auf einem PaginationContainer basiert, und ich möchte eine Ladeanzeige anzeigen, wenn ich zusätzliche Daten page (loadMore() wird aufgerufen). Ich sehe keine Möglichkeit, dies zu tun, außer irgendwie eine benutzerdefinierte Netzwerkimplementierung bereitzustellen, die dies während jeder Netzwerkanforderung tut, die nicht genau das ist, was ich will. Gedanken?

Answer 1

Ich denke Relay mit einer API kommt, damit Sie wissen, wenn Anfrage anhängig ist, haben Sie Zugriff auf this.props.relay.isLoading() haben können (siehe docs)

class MyComponent extends React.Component { 
    render() { 
    return { 
     <div> 
     {this.props.relay.isLoading() ? <Spinner /> : null> 
     // .... 
     </div> 
    } 
    } 
} 

export default createPaginationContainer(
    MyComponent, 
    ... 
) 

Answer 2

Es scheint mir, dass dies ein weit verbreiteter Anwendungsfall ist das sollte explizit in der Relay-API unterstützt werden, aber das Folgende ist das Beste, was ich mir vorstellen kann. Vorschläge für andere Lösungen werden empfohlen.

In meiner Komponente, die auf einem Paginierung Behälter basiert:

constructor(arg) { 
    super(arg); 
    this.state = {isLoadingMore: false} 
} 

componentWillReceiveProps(nextProps) { 
    if (this.props !== nextProps) { 
    this.setState({isLoadingMore:false}); 
    } 
} 

// onClick handler for "More" button 
handleMore() { 
    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) { 
    return; 
    } 

    this.setState({isLoadingMore: true}); 
    this.props.relay.loadMore(
    ... 
) 
} 

render() { 
... 
const isLoadingMore = this.state.isLoadingMore;  
return (isLoadingMore ? <LoadingIndicator /> : <ListOfStuffView /> 

}