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

Question

我有一个使用 react-apollo 获取列表的 React 组件。服务器正在使用中继式连接。

我的问题是，当我获取下一页时，它显示 "Loading..." 然后页面光标移回顶部，如下所示。

我想要更好的用户体验，不显示 "Loading..." 文本，并且在获取后，将新获取的结果附加到列表的后面。

这是代码（去掉不相关的代码）：

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>)
  }
}

我怎样才能做到这一点？我能想到的另一种方法是根本不使用 <Query> 标记，并通过 onClick 处理程序中的 HOC 检索 Apollo 客户端本身，获取结果，并通过更新将结果添加回 links 对象组件状态。

那么，这就引出了一个问题，为什么我们要使用<Query> <Mutation>，我们总是可以自己获取Apollo客户端并更好地处理查询交互？

Answer 1

由于您已经在缓存中拥有从之前页面获取的数据，因此您可以在等待获取新数据的同时在 if（加载）中有条件地呈现该数据。

if(loading) {
    return data.allLinks ? 
       <> 
           <LinksComponent {/*pass in the old data here...*/}/>
           <Spinner/>
       </> : <Spinner/>
}

如果您已经有 data.allLinks，即使正在获取新数据，您也会在 LinksComponent 中显示该数据。当 Loading 为真时，Spinner 组件将显示在 LinksComponent 下。如果您没有获取任何数据，您将只显示 Spinner 组件。

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

Loading text shown on fetching pagination requests

react-apollo

apollo-client