使用来自client.query的响应更新商店，使用react-apollo作为搜索栏功能

Question

我有一个Graphcool后端，我想在按下按钮时搜索。根据我的理解：如果我使用<span class="blue"> Hi </span> <button> Change </button> 中的graphql容器，组件将在安装后立即进行查询。

这不是我想要的。我打算只在按下按钮时搜索。我知道withApollo容器允许我这样进行查询：

react-apollo

我的问题：如何使用返回的响应更新商店？我是以错误的方式解决这个问题吗？

Answer 1

所以我意识到我的方式是错误的。我找到了这个有用的帖子：search feature with react-apollo。

我会更简单地拥有状态，然后用响应更新所述状态：

this.props.client.query({
    query: MY_QUERY,
    variables: {
        first, // for pagination
        skip,
        orderBy,
        searchText
    },
}).then(result => this.setState({ thingsToRender: result.data.thingsToRender });

然后你当然会通过映射它或使用FlatList来呈现对象（如果你使用反应本机）。

如果我真的想这样做，我也发现了如何更新我的商店。该组件需要由graphql的{​​{1}}和withApollo高阶组件包装才能实现：

react-apollo

然后你做一个这样的方法：

compose(
  withApollo,
  graphql(SOME_QUERY)
)(MyComponent)

它几乎就像在redux reducer中更新状态一样。