问加载在获取分页请求时显示的文本

EN

class Links extends Component {
  fetchNextPage = (pageInfo, fetchMore) => ev => {
    const { linksOrder } = this.props;
    const after = pageInfo.endCursor;
    const queryVars = getQueryVarsFromParam(linksOrder, after);

    fetchMore({
      variables: queryVars,
      updateQuery: (previousResult, { fetchMoreResult }) => {
        const { allLinks: { nodes: newLinks, pageInfo: newPageInfo }} = fetchMoreResult;
        // Handle no new result
        if (newLinks.length === 0) return previousResult;

        // With new result, we append to the previous result list
        let finalResult = previousResult;
        finalResult.allLinks.pageInfo = newPageInfo;
        finalResult.allLinks.nodes = finalResult.allLinks.nodes.concat(newLinks);

        return finalResult;
      }
    })
  }

  render() {
    const { linksOrder, classes } = this.props;
    const { linkGqlCursorAfter: after } = this.state;
    const queryVars = getQueryVarsFromParam(linksOrder, after);

    return(<Query query={LINKS_QUERY_GQL} variables={queryVars}>
      {({ loading, error, data, fetchMore }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;

        const { allLinks: { nodes: links, pageInfo }} = data;
        return(
          <React.Fragment>
            <Grid container spacing={8} className={ classes.linksList } >

              { links.map((link, ind) => (
                <Grid item key={link.id}><Link ind={ind} link={link}/></Grid>
              )) }

              { pageInfo.hasNextPage ? (
                <Grid item key={ "fetchNextPage" } style={{ alignSelf: "center" }}>
                  <Fab onClick={ this.fetchNextPage(pageInfo, fetchMore) }
                    size="small" color="secondary"><AddIcon /></Fab>
                </Grid>)
                : null }

            </Grid>
          </React.Fragment>
        )
      } }
    </Query>)
  }
}