Is it possible to prefetch fetchMore in Apollo Client? - react-apollo

Question

I've successfully implemented pagination via fetchMore. Is it possible to prefetch the next page in order to improve performance?
The Apollo docs describe a way to prefetch data using client:
const Feed = () => (
<View style={styles.container}>
<Header />
<Query query={GET_DOGS}>
{({ loading, error, data, client }) => {
if (loading) return <Fetching />;
if (error) return <Error />;
return (
<DogList
data={data.dogs}
renderRow={(type, data) => (
<Link
to={{
pathname: `/${data.breed}/${data.id}`,
state: { id: data.id }
}}
onMouseOver={() =>
client.query({
query: GET_DOG,
variables: { breed: data.breed }
})
}
style={{ textDecoration: "none" }}
>
<Dog {...data} url={data.displayImage} />
</Link>
)}
/>
);
}}
</Query>
</View>
);
Building off the fetchMore example provided in the docs, I want to prefetch the next page once the first page has rendered.
const FEED_QUERY = gql`
query Feed($offset: Int, $limit: Int) {
feed(offset: $offset, limit: $limit) {
id
# ...
}
}
`;
const PrefetchFeed = ({ client, offset }) => {
client.query({
query: FEED_QUERY,
variables: {
offset,
limit: 10
}
});
return null;
};
const FeedData = ({ match }) => (
<Query
query={FEED_QUERY}
variables={{
offset: 0,
limit: 10
}}
fetchPolicy="cache-and-network"
>
{({ data, fetchMore, client }) => (
<Feed
entries={data.feed || []}
onLoadMore={() =>
fetchMore({
variables: {
offset: data.feed.length
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
return Object.assign({}, prev, {
feed: [...prev.feed, ...fetchMoreResult.feed]
});
}
})
}
/>
<PrefetchFeed client={client} offset={data.feed.length}/>
)}
</Query>
);
Instead of improving performance, prefetching has no impact on load time.