Как повторно получить данные в Reaction-Apolloсо значением из другого компонента ввода? - PullRequest
Новая
       34

Как повторно получить данные в Reaction-Apolloсо значением из другого компонента ввода?

0 голосов
/ 18 апреля 2019

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

  • <Search /> - простой ввод, который вызывает client.query() onEnter с некоторым типом ключевого словапо пользователю.
  • <OfferList /> - компонент реактивного-аполлона + бесконечный-прокручиваемый реактив: 
<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 />, используя fetchMore с новым ключевым словом, предоставленным пользователем в <Search />?
  2. Как бы вы предложили сбросить номер страницы, когда пользователь вводил новое ключевое слово (в этом случае должен быть 1case)?
  3. Пользователь видит список предложений и прядильщик при прокрутке вниз, но когда пользователь нажимает, мне нужен прядильщик без продуктов, которые будут показаны.У вас есть какие-нибудь идеи?

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

...