Is it possible to prefetch fetchMore in Apollo Client?

Viewed 341

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.

0 Answers
Related