Loading text shown on fetching pagination requests - react-apollo

Question

I have a react component using react-apollo fetching a list. The server is using relay style connection.
My question is when I fetch for next page, it shows the "Loading..." and then the page cursor moves back to the top, shown in the following.
https://imgur.com/a/ImfQPVJ
I want to have a better UX that no "Loading..." text shown, and after fetching, just append the newly fetched result to the back of the list.
This is the code (remove non-relevant code):
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>)
}
}
How could I achieve that? Another approach I could think of is not to use <Query> tag at all, and retrieve the Apollo client itself via HOC in onClick hander, fetch the result, and add the result back to the links object by updating the component state.
Then, this begs the question of why we want to use <Query> <Mutation>, when we can always get the Apollo client and handle the query interaction better ourselves?

Answer 1

Since you already have the data you fetched from previous pages in your cache you can render that conditionally in your if (loading) while waiting for new data to be fetched.
if(loading) {
return data.allLinks ?
<>
<LinksComponent {/*pass in the old data here...*/}/>
<Spinner/>
</> : <Spinner/>
}
If you already have data.allLinks you will display that data in a LinksComponent even when new data is being fetched. The Spinner component will be displayed under the LinksComponent while Loading is true. If you don't have any data fetched, you will just display the Spinner component.