Можно ли предварительно получить fetchMore в Apollo Client? - PullRequest
Новая
       5

Можно ли предварительно получить fetchMore в Apollo Client?

0 голосов
/ 18 октября 2019

Я успешно реализовал нумерацию страниц через fetchMore. Можно ли предварительно выбрать следующую страницу для повышения производительности?

В документации Apollo описан способ предварительной выборки данных с использованием 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>
);

Buildingoff пример fetchMore, представленный в документации , я хочу предварительно выбрать следующую страницу после того, как первая страница будет отображена. 

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

Вместо повышения производительности предварительная выборка не влияет на время загрузки.

...