使用 react-apollo 的 client.query 响应更新商店以实现搜索栏功能

Question

我有一个 Graphcool 后端，我想在按下按钮时搜索它。据我了解：如果我使用来自 react-apollo 的 graphql 容器，组件将在安装后立即进行查询。

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

this.props.client.query({
        query: MY_QUERY,
        variables: {
            first, // for pagination
            skip,
            orderBy,
            searchText
        }
    }); // returns a promise

我的问题：如何使用 returns 的响应更新商店？我是不是用错了方法？

Answer 1

所以我意识到我的做法是错误的。我发现这很有帮助 post：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 来渲染对象（如果您使用的是 React Native）。

如果我真的想那样做，我还发现了如何更新我的商店。该组件需要被来自 react-apollo 的 graphql 和 withApollo 高阶组件包装才能工作：

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

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

onSearchButtonPress = async () => {
  const { first, skip, orderBy, searchText } = this.state;

  const result = await this.props.client.query({
    query: MY_QUERY,
    variables: {
      first,
      skip,
      orderBy,
      searchText
    }
  });
  const items = result.data.items;
  this.props.data.updateQuery(prev => ({
    ...prev,
    allItems: _.uniqBy([...prev.allItems, ...items], o => o.id)
    // lodash uniqBy helper method helps with removing older items
    // with the same id (essentially updating them)
  });

这几乎就像在 redux reducer 中更新状态。

使用 react-apollo 的 client.query 响应更新商店以实现搜索栏功能

Updating store with the response from client.query with react-apollo for a searchbar function

reactjs

graphql

react-apollo