Реагируйте: Как обновить данные в таблице после нажатия кнопки

Question

Я пытаюсь настроить кнопку обновления так, чтобы, когда конечный пользователь создал новый билет, я мог видеть вновь созданный билет, когда я нажимаю кнопку обновления.Я использую клиент Apollo для получения данных с сервера GraphQL.Интересно, как мне обновить таблицу, я попробовал forceUpdate и this.setState(), я проверил, что она работает, поместив {Math.random()} в функцию рендеринга, однако он не обновляет и не дает новые данные, также попытался вставить кнопку обновления вbutton.js по-прежнему проблема сохраняется.window.location.reload() работает, но это не то, что я хочу, есть ли что-то, что реагирует, может сделать как любой хук жизненного цикла, я пробовал:

componentWillReceiveProps(nextProps) {
  if(this.props.ticket !== nextProps.ticket) {
     console.log(this.props.ticket)
  }
}

в table.js, но это не сработало, или у меня естьиспользовать некоторый клиентский API Apollo.Пожалуйста, предложите, спасибо заранее.

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.handleRefresh =  this.handleRefresh.bind(this);

  }

  handleRefresh()  {
    this.forceUpdate();
  }

  render() {
    const { data: {loading, getTickets}} = this.props;
    if(loading) {
      return <h4>Loading..</h4>
    }

    const Data = getTickets.map((ticket, id) => {
       return <Table ticket={ticket} key={id} />
    })


    return (
      <div className="App">
        <header className="App-header">
          <Header />
          <Button className="lookup" bsStyle="info" bsSize="xsmall" 
onClick={this.handleRefresh}><h5>lookup 1</h5></Button><br/><br/>
              <div className="container" style={{overflowX:"auto"}}>
                <div className="table-responsive">
                  <table className="table table-bordered table-hover">
                          <thead>
                            <tr>
                              <th>TicketID</th>
                              <th>Name</th>
                              <th>Comment</th>
                              <th>EmpID</th>
                            </tr>
                          </thead>
                          <tbody>
                              {Data}
                          </tbody>
                    </table>
               </div>
               <h4>Random number : {Math.random()}</h4>
              </div>
            </header>
          </div>
        );
    }
    }

    export default compose(
     graphql(GetTickets)
    )(App);

table.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';


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

    }

    render() {
        return (
          <tr>
                <td>{this.props.ticket.ticketID}</td>
                <td>{this.props.ticket.name}</td>
                <td>{this.props.ticket.comment}</td>
                <td>{this.props.ticket.EmpID}</td>
          </tr>

        )
    }
}


Table.propTypes = {
    ticketID: PropTypes.number,
    name: PropTypes.string,
    EmpID: PropTypes.number,
    comment: PropTypes.string
}


export default Table;

Answer 1

graphql обеспечивает refetch реквизит именно для повторного запроса к базе данных в любой момент.просто передайте в качестве опоры свой дочерний компонент и вызовите функцию, когда вы нажмете кнопку обновления.Смотрите документы: https://www.apollographql.com/docs/react/essentials/queries.html#refetching

Answer 2

Попробуйте сохранить данные graphQL в виде состояний для вашего компонента.