Блог

У меня следующая проблема с react-apollo: есть два компонента, и оба расположены в совершенно разных местах:

• <Search /> — простой ввод, который запускает client.query() onEnter с некоторым ключевым словом, введенным пользователем.
• <OfferList /> — компонент react-apollo react-infinite-scroll:

 <Query
  query={OFFERS_QUERY}
  variables={{ page: 1, keyword: 'SomeDefaultKeyword' }}
>
        {({ error, data, loading, fetchMore, client }) => {

          if (error) {
            return <div>Something went wrong. {error.message}</div>;
          }

          if (loading) {
            return <Loader />;
          }

          const { search: { metadata, offers }} = data;

          return (
            <InfiniteScroll
              hasMore={metadata.hits > 0}
              loader={<Loader />}
              loadMore={pageNumber => {
                fetchMore({
                  updateQuery: (prev, { fetchMoreResult } )=> {
                    if (!prev.fetchMoreResult) return prev;

                    return {
                      search: {
                        __typename: prev.search.__typename,
                        criteria: fetchMoreResult.search.criteria,
                        metadata: prev.search.metadata,
                        offers: [
                          ...prev.search.offers,
                          ...fetchMoreResult.search.offers,
                        ],
                      },
                    };
                  },
                  variables: {
                    keyword: ?,
                    page: ?,
                  },
                });
              }}
              useWindow={true}
            >
              <List>
                {offers.map( offer  => (
                  <ListItem key={offer.id}>
                    <OfferCard description={offer.name} />
                  </ListItem>
                ))}
              </List>
            </InfiniteScroll>
          );
        }}
</OffersQuery>
 

Вопросы:

1. Как я могу сделать следующий запрос в <OfferList /> ключевом слове using fetchMore with new, предоставленном пользователем в <Search /> ?
2. Как бы вы предложили сбросить номер страницы, когда пользователь вводит новое ключевое слово (в этом случае должно быть 1)?
3. Пользователь видит список предложений и счетчик при прокрутке вниз, но когда пользователь нажимает, мне нужен счетчик без отображения продуктов. У вас есть какие-нибудь идеи?

Я подумал, есть ли какой-то механизм, который позволяет мне сохранять значение из ввода в хранилище apollo и может принудительно обновлять <Query /> . В этом случае это решает проблему, но я не понял, как я могу сделать это правильно. Я пытался вызвать client.writeQuery , client.watchQuery , client.writeData в качестве onChage обратного вызова ввода, но, похоже, он не выполняет принудительный <Query /> повторный рендеринг. Если у вас есть опыт работы с таким случаем, было бы неплохо, если бы вы могли поделиться со мной некоторыми идеями.