过滤查询后更新 Apollo 商店答案

【问题标题】：Update Apollo store after filtered query过滤查询后更新 Apollo 商店
【发布时间】：2018-06-13 08:25:24
【问题描述】：

我有一个可以使用某些标准过滤掉的项目列表。每当我执行搜索时，我想抓取一个过滤的项目并更新它的内容，这似乎正确地更新了阿波罗商店，但由于某种原因没有显示更改。也许 componentWillReceiveProps 生命周期方法没有被触发，我需要自己实现它？我尝试在突变后使用“更新”手动更新商店，但它也不起作用。

这是我目前的代码：

ClientList.js

class ClientList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hasMoreItems: true,
      loading: false,
      clients: [],
      searchText: ''
    }
  }

  _executeSearch = async () => {
    const { searchText } = this.state;

    this.setState({ loading: true });

    const result = await this.props.client.query({
      query: ALL_CLIENTS_QUERY,
      variables: { searchText },
      fetchPolicy: 'network-only'
    })

    this.setState({
      clients: result.data.allClients,
      loading: false
    });
  }

  render() {
    let { allClients, loading, fetchMore } = this.props.data;
    const { hasMoreItems, clients, searchText } = this.state;

    if (clients.length > 0) {
      allClients = clients;
      loading = this.state.loading;
    }

    return (
      <section>
        <h1 className="text-center">Clients</h1>
        <InputGroup>
          <InputGroupButton>
            <Button onClick={() => this._executeSearch()}>I'm a button</Button>
          </InputGroupButton>
          <Input
            onChange={(e) => this.setState({ searchText: e.target.value })}
            placeholder="Search by social or comercial name"
          />
        </InputGroup>
        {loading ?
          <div className="text-center mt-4">
            <i className="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
          </div>
        : <div className="mt-3">
            {allClients.map(client =>
              <div key={`client-${client.id}`} className="client-content">
                <Link to={`/clients/${client.id}`}>
                  <h1 className="mb-1">
                    {client.socialName}
                    <small className="text-muted ml-3">{client.comercialName}</small>
                  </h1>
                </Link>
              </div>
            })
          </div>
      </section>
    );
  };
}

export default withApollo(graphql(ALL_CLIENTS_QUERY)(ClientList));

ClientEdit.js

class ClientEdit extends Component {
  onSubmit = async (e) => {
    e.preventDefault();

    this.setState({ loading: true });

    const payload = {
      id: this.props.match.params.id,
      rfc: this.state.rfc,
      socialName: this.state.socialName,
      legalRepresentative: this.state.legalRepresentative,
      comercialName: this.state.comercialName
    }
     // Mutation updates the store but doesnt show results
    const resp = await this.props.mutate({
      variables: payload,
      update: (store, { data: { updateClient } }) => {
        // Tried updating but it doesnt show changes also;
      }
    });
  }
}

export default compose(
  graphql(GET_CLIENT_QUERY, {
    options: props => ({
      variables: {
        id: props.match.params.id
      }
    })
  }),
  graphql(UPDATE_CLIENT_MUTATION)
)(ClientEdit);

【问题讨论】：

标签： reactjs apollo react-apollo apollo-client

【解决方案1】：

如果我们检查数据是否准备好并且可以将其渲染出来会更好，并且当数据仍在获取时，不应进行与该 apollo 数据对象关联的渲染：

render(){
    const {loading} = this.props.data;
    if(loading) {return <div>Loading...</div>}
    return (
           ...
           )

【讨论】：

【解决方案2】：

我设法使用 componentWillReceiveProps 生命周期方法解决了这个问题。我不知道这是一个错误还是有其他解决方案；

componentWillReceiveProps(newProps) {
    const { allClients, loading } = newProps.data;

    if (!loading) {
      const clients = _.intersectionBy(allClients, this.state.clients, 'id');
      this.setState({ clients });
    }
  }

【讨论】：