过滤后的查询

Question

我有一个可以使用特定条件过滤掉的项目列表。每当我执行搜索时，我想获取一个过滤的项目并更新其内容，这似乎正确地更新了apollo存储，但由于某种原因，没有显示更改。也许componentWillReceiveProps生命周期方法没有被解雇，我需要自己实现它？ 我尝试使用＆＃34; update＆＃34;手动更新商店。突变后它也不会起作用。

到目前为止，这是我的代码：

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);

Answer 1

如果我们检查数据是否准备好并且我们可以将其渲染出来，并且当数据仍然被提取时更好，那么就不应该执行与该apollo数据对象相关联的渲染：

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

Answer 2

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

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

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