Question

我的下一个关于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>

问题：

如何使用<OfferList />中用户提供的新关键字，使用fetchMore在<Search />中发出下一个请求？
当用户键入新关键字（在这种情况下需要为1）时，您如何建议重置页码？
向下滚动时，用户会看到商品列表和微调框，但是当用户单击时，我需要没有产品的微调框。你有什么想法吗？

我在考虑是否有某种机制可以让我从输入到阿波罗商店中保存价值，并可以强制在<Query />中进行更新。在那种情况下，它可以解决问题，但是我不知道该如何做。我试图调用client.writeQuery，client.watchQuery，client.writeData作为输入onChage回调，但是看起来它没有执行强制<Query />的重新渲染。如果您有处理此类案件的经验，请与我分享一些想法。

如何使用来自另一个输入组件的值重新获取react-apollo <query>中的数据？

0 个答案: