是否可以在Apollo Client中预取fetchMore?

时间:2019-10-18 18:58:57

标签: react-apollo apollo-client

我已经通过fetchMore成功实现了分页。是否可以预取下一页以提高性能?

The Apollo docs描述了一种使用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>
);

the fetchMore example provided in the docs为基础,我想在第一页呈现后预取下一页。

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

预取并不会提高性能,而不会影响加载时间。

0 个答案:

没有答案